因为感觉从服务端导出表格太繁琐了，所以想直接从客户端导出，接下来介绍一下iview table如何导出，本文引用了https://blog.csdn.net/zcfzfc123456789/article/details/99569513的代码，只是感觉这个作者写的有点难懂，所以在他的基础上修改了一下（如有侵权，可以联系我删除该文章）
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <link rel="stylesheet" href="../resources/iview.css"> 7 </head> 8 <body> 9 10 <div id="app"> 11 <div> 12 <i-button type="primary" @click="exportTable(false)">导出选中</i-button> 13 <i-button type="primary" @click="exportTable(true)">导出全部</i-button> 14 </div> 15 <i-table border stripe ref="tables" :columns="tableColumns" :data="tableData" @on-selection-change='selectChange'></i-table> 16 </div> 17 18 <script src="../resources/vue.min.js"></script> 19 <script src="../resources/iview.min.js"></script> 20 <script> 21 const app = new Vue({ 22 el: "#app", 23 data: { 24 selectList:[], 25 tableColumns: [ 26 { 27 type: 'selection', 28 60, 29 align: 'center' 30 }, 31 { 32 title: '姓名', 33 key: 'name' 34 }, 35 { 36 title: '年龄', 37 key: 'age' 38 }, 39 { 40 title: '地址', 41 key: 'address' 42 }, 43 { 44 title: '日期', 45 key: 'date' 46 } 47 ], 48 tableData: [ 49 { 50 name: 'John Brown', 51 age: 18, 52 address: 'New York No. 1 Lake Park', 53 date: '2016-10-03' 54 }, 55 { 56 name: 'Jim Green', 57 age: 24, 58 address: 'London No. 1 Lake Park', 59 date: '2016-10-01' 60 }, 61 { 62 name: 'Joe Black', 63 age: 30, 64 address: 'Sydney No. 1 Lake Park', 65 date: '2016-10-02' 66 }, 67 { 68 name: 'Jon Snow', 69 age: 26, 70 address: 'Ottawa No. 2 Lake Park', 71 date: '2016-10-04' 72 } 73 ] 74 }, 75 methods: { 76 exportTable(status){ 77 if(status){ 78 this.$refs.tables.selectAll(status); 79 } 80 this.$refs.tables.exportCsv({ 81 filename: `二手业绩报表.csv`, 82 columns: this.tableColumns.filter((col, index) => index > 0), 83 data: this.tableData.filter((data, index) => { 84 for (let i = 0; i < this.selectList.length; i++) { 85 if (this.compareObject(data, (this.selectList)[i])) { 86 return true 87 } 88 } 89 return false 90 }) 91 }) 92 }, 93 compareObject(obj1, obj2) { 94 var attrs1 = Object.keys(obj1) 95 var attrs2 = Object.keys(obj2) 96 if (attrs1.length !== attrs2.length) { 97 return false 98 } 99 for (var j = 0; j < attrs1.length; j++) { 100 var attrNames = attrs1[j] 101 if (obj1[attrNames] !== obj2[attrNames]) { 102 return false 103 } 104 } 105 return true 106 }, 107 selectChange() { 108 // 选中的项 109 this.selectList = [] 110 this.selectList = this.$refs.tables.getSelection() 111 } 112 } 113 }) 114 </script> 115 </body> 116 </html>