iview table匯出功能

阿新 • • 發佈：2021-01-20

因為感覺從服務端匯出表格太繁瑣了，所以想直接從客戶端匯出，接下來介紹一下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                     width: 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>