iview选择导出特定的行和列（导出格式为CVS）

分手后的思念是犯贱 2022-03-15 18:49 107阅读 0赞

要实现的功能：如下图所示，可以选择制定的行，并将选择的行导出为cvs，选择之后可取消，可增加。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hlbGxvd29ybGRkbQ_size_16_color_FFFFFF_t_70]关键代码如下所示：

<template>
    <div>
        <Table :columns="columns8"  @on-select="test" @on-select-cancel="remainRow" :data="data7" size="small" ref="table"></Table>
        <br>
        <Button type="primary" size="large"  @click="exportData(1)"><Icon type="ios-download-outline"></Icon> Export source data</Button>
        <Button type="primary" size="large" @click="exportData(2)"><Icon type="ios-download-outline"></Icon> Export sorting and filtered data</Button>
        <Button type="primary" size="large" @click="exportData(3)"><Icon type="ios-download-outline"></Icon> Export custom data</Button>
    </div>
    </template>
    <script>
        import compareObject from '../utills/util';
        export default {
            data () {
                return {
                   selectionData:[],
                    columns8: [
                        {
                            type:'selection',
                            width:60,
                            align:'center'
    
    
                        },
                        {
                            "title": "Name",
                            "key": "name",
                 
                            "width": 200
                        },
                        {
                            "title": "Show",
                            "key": "show",
                            "width": 150,
                            "sortable": true,
                            filters: [
                                {
                                    label: 'Greater than 4000',
                                    value: 1
                                },
                                {
                                    label: 'Less than 4000',
                                    value: 2
                                }
                            ],
                            filterMultiple: false,
                            filterMethod (value, row) {
                                if (value === 1) {
                                    return row.show > 4000;
                                } else if (value === 2) {
                                    return row.show < 4000;
                                }
                            }
                        },
                        {
                            "title": "Weak",
                            "key": "weak",
                            "width": 150,
                            "sortable": true
                        },
                        {
                            "title": "Signin",
                            "key": "signin",
                            "width": 150,
                            "sortable": true
                        },
                        {
                            "title": "Click",
                            "key": "click",
                            "width": 150,
                            "sortable": true
                        },
                        {
                            "title": "Active",
                            "key": "active",
                            "width": 150,
                            "sortable": true
                        },
                        {
                            "title": "7, retained",
                            "key": "day7",
                            "width": 150,
                            "sortable": true
                        },
                        {
                            "title": "30, retained",
                            "key": "day30",
                            "width": 150,
                            "sortable": true
                        },
                        {
                            "title": "The next day left",
                            "key": "tomorrow",
                            "width": 150,
                            "sortable": true
                        },
                        {
                            "title": "Day Active",
                            "key": "day",
                            "width": 150,
                            "sortable": true
                        },
                        {
                            "title": "Week Active",
                            "key": "week",
                            "width": 150,
                            "sortable": true
                        },
                        {
                            "title": "Month Active",
                            "key": "month",
                            "width": 150,
                            "sortable": true
                        }
                    ],
                    data7: [
                        {
                            "name": "Name1",
                            "fav": 0,
                            "show": 7302,
                            "weak": 5627,
                            "signin": 1563,
                            "click": 4254,
                            "active": 1438,
                            "day7": 274,
                            "day30": 285,
                            "tomorrow": 1727,
                            "day": 558,
                            "week": 4440,
                            "month": 5610
                        },
                        {
                            "name": "Name2",
                            "fav": 0,
                            "show": 4720,
                            "weak": 4086,
                            "signin": 3792,
                            "click": 8690,
                            "active": 8470,
                            "day7": 8172,
                            "day30": 5197,
                            "tomorrow": 1684,
                            "day": 2593,
                            "week": 2507,
                            "month": 1537
                        },
                        {
                            "name": "Name3",
                            "fav": 0,
                            "show": 7181,
                            "weak": 8007,
                            "signin": 8477,
                            "click": 1879,
                            "active": 16,
                            "day7": 2249,
                            "day30": 3450,
                            "tomorrow": 377,
                            "day": 1561,
                            "week": 3219,
                            "month": 1588
                        },
                        {
                            "name": "Name4",
                            "fav": 0,
                            "show": 9911,
                            "weak": 8976,
                            "signin": 8807,
                            "click": 8050,
                            "active": 7668,
                            "day7": 1547,
                            "day30": 2357,
                            "tomorrow": 7278,
                            "day": 5309,
                            "week": 1655,
                            "month": 9043
                        },
                        {
                            "name": "Name5",
                            "fav": 0,
                            "show": 934,
                            "weak": 1394,
                            "signin": 6463,
                            "click": 5278,
                            "active": 9256,
                            "day7": 209,
                            "day30": 3563,
                            "tomorrow": 8285,
                            "day": 1230,
                            "week": 4840,
                            "month": 9908
                        },
                        {
                            "name": "Name6",
                            "fav": 0,
                            "show": 6856,
                            "weak": 1608,
                            "signin": 457,
                            "click": 4949,
                            "active": 2909,
                            "day7": 4525,
                            "day30": 6171,
                            "tomorrow": 1920,
                            "day": 1966,
                            "week": 904,
                            "month": 6851
                        },
                        {
                            "name": "Name7",
                            "fav": 0,
                            "show": 5107,
                            "weak": 6407,
                            "signin": 4166,
                            "click": 7970,
                            "active": 1002,
                            "day7": 8701,
                            "day30": 9040,
                            "tomorrow": 7632,
                            "day": 4061,
                            "week": 4359,
                            "month": 3676
                        },
                        {
                            "name": "Name8",
                            "fav": 0,
                            "show": 862,
                            "weak": 6520,
                            "signin": 6696,
                            "click": 3209,
                            "active": 6801,
                            "day7": 6364,
                            "day30": 6850,
                            "tomorrow": 9408,
                            "day": 2481,
                            "week": 1479,
                            "month": 2346
                        },
                        {
                            "name": "Name9",
                            "fav": 0,
                            "show": 567,
                            "weak": 5859,
                            "signin": 128,
                            "click": 6593,
                            "active": 1971,
                            "day7": 7596,
                            "day30": 3546,
                            "tomorrow": 6641,
                            "day": 1611,
                            "week": 5534,
                            "month": 3190
                        },
                        {
                            "name": "Name10",
                            "fav": 0,
                            "show": 3651,
                            "weak": 1819,
                            "signin": 4595,
                            "click": 7499,
                            "active": 7405,
                            "day7": 8710,
                            "day30": 5518,
                            "tomorrow": 428,
                            "day": 9768,
                            "week": 2864,
                            "month": 5811
                        }
                    ]
                }
            },
            //导出制定的数据
            methods: {
                test(selection,row){
                        this.selectionData = selection;
                        
                },
                remainRow(selection,row){
    
                        this.selectionData = selection;
                },
                exportData (type) {
                    if (type === 1) {
                        this.$refs.table.exportCsv({
                            filename: 'The original data'
                        });
                    } else if (type === 2) {
                        this.$refs.table.exportCsv({
                            filename: 'Sorting and filtering data',
                            original: false
                        });
                    } else if (type === 3) {
                    //这里是主要修改的地方
                        this.$refs.table.exportCsv({
                            filename: 'Custom data',
                            columns: this.columns8.filter((col, index) => index  >  0),
                              data: this.data7.filter((data,index) =>{   
    //filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元//素。
                                  for (let i = 0;i < this.selectionData.length;i++){
                                  //比较对象是否相等
                                        if (compareObject(data,(this.selectionData)[i])){
                                                console.log("Burning Test"+i);
                                                return   true;
                                        }
                                  }
                                  return  false;
    
                                  
                              })
                        });
                    }
                }
               
    
            }
        }
    </script>

//比较对象是否相等的方法
    export  default  function    compareObject(obj1,obj2){
        //Object.getOwnPropertyNames():方法返回一个指定对象所有自身属性的属性名（包括不可枚举属性但不包括Symbol值作为名称的属性）组成的数组。
        //对象内置属性方法:Object.keys()；该方法返回一个数组，数组内包括对象内可枚举属性以及方法名称。数组中属性名的排列顺序和使用 for...in 遍历该对象时返回的顺序一致。
    			var  attrs1 = Object.keys(obj1);
    			var   attrs2 = Object.keys(obj2);
    			if (attrs1.length   !=   attrs2.length){
    					return   false;
    			}
    			for (var  j = 0; j <   attrs1.length;j++){
    				var   attrNames = attrs1[j];
    				if (obj1[attrNames] != obj2[attrNames]){
    						return  false;
    				}
    			}
    			return  true;
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hlbGxvd29ybGRkbQ_size_16_color_FFFFFF_t_70]: /images/20220311/a85b37f4cb7d423592927388906e2c0e.png