iview选择导出特定的行和列（导出格式为CVS）
要实现的功能：如下图所示，可以选择制定的行，并将选择的行导出为cvs，选择之后可取消，可增加。关键代码如下所示：
<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;
}