add excel download

Author: PanJiaChen

src/mock/index.js

@@ -2,8 +2,10 @@ import Mock from 'mockjs';
 Mock.mock(/\/article\/list/, {
   'data|20': [{
     id: '@id',
-    content: '@cparagraph',
-    time: '@datetime'
+    title: '@ctitle(10, 20)',
+    author: '@cname',
+    display_time: '@datetime',
+    pageviews: '@integer(300, 5000)'
   }]
 })
 

src/views/excel/index.vue

@@ -1,6 +1,35 @@
 <template>
-  <div class="errPage-container">
-    aaa
+  <div class="app-container">
+    <el-button style='margin-bottom:20px;float:right' type="primary" icon="document" @click="handleDownload">导出excel</el-button>
+    <el-table :data="list" v-loading.body="listLoading" element-loading-text="拼命加载中" border fit highlight-current-row>
+      <el-table-column align="center" label='ID' width="95">
+        <template scope="scope">
+          {{scope.$index}}
+        </template>
+      </el-table-column>
+      <el-table-column label="文章标题">
+        <template scope="scope">
+          {{scope.row.title}}
+        </template>
+      </el-table-column>
+
+      <el-table-column label="作者" width="110">
+        <template scope="scope">
+          <span>{{scope.row.author}}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="阅读数" width="105" align="center">
+        <template scope="scope">
+          {{scope.row.pageviews}}
+        </template>
+      </el-table-column>
+      <el-table-column align="center" prop="created_at" label="发布时间" width="200">
+        <template scope="scope">
+          <i class="el-icon-time"></i>
+          <span>{{scope.row.display_time}}</span>
+        </template>
+      </el-table-column>
+    </el-table>
   </div>
 </template>
 <script>
@@ -9,14 +38,7 @@ export default {
   data() {
     return {
       list: null,
-      total: null,
-      listLoading: true,
-      listQuery: {
-        page: 1,
-        limit: 20,
-        area: undefined,
-        department: undefined
-      }
+      listLoading: true
     }
   },
   created() {
@@ -26,12 +48,22 @@ export default {
     fetchData() {
       this.listLoading = true;
       getList(this.listQuery).then(response => {
-        console.log(response)
-        const data = response.data;
-        this.list = data.items;
-        this.total = data.item_count;
+        this.list = response.data;
         this.listLoading = false;
       })
+    },
+    handleDownload() {
+      require.ensure([], () => {
+        const { export_json_to_excel } = require('vendor/Export2Excel');
+        const tHeader = ['序号', '文章标题', '作者', '阅读数', '发布时间'];
+        const filterVal = ['id', 'title', 'author', 'pageviews', 'display_time'];
+        const list = this.list;
+        const data = this.formatJson(filterVal, list);
+        export_json_to_excel(tHeader, data, '列表excel');
+      })
+    },
+    formatJson(filterVal, jsonData) {
+      return jsonData.map(v => filterVal.map(j => v[j]))
     }
   }
 };