refine code

src/views/excel/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="app-container">
-    <el-button style='margin-bottom:20px;float:right' type="primary" icon="document" @click="handleDownload">导出excel</el-button>
+    <el-button style='margin-bottom:20px;' type="primary" icon="document" @click="handleDownload" :loading="downloadLoading">导出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">
@@ -12,7 +12,6 @@
           {{scope.row.title}}
         </template>
       </el-table-column>
-
       <el-table-column label="作者" width="110">
         <template scope="scope">
           <span>{{scope.row.author}}</span>
@@ -40,7 +39,8 @@ export default {
   data() {
     return {
       list: null,
-      listLoading: true
+      listLoading: true,
+      downloadLoading: false
     }
   },
   created() {
@@ -49,21 +49,21 @@ export default {
   methods: {
     fetchData() {
       this.listLoading = true
-      getList(this.listQuery).then(response => {
+      getList().then(response => {
         this.list = response.data
         this.listLoading = false
       })
     },
     handleDownload() {
+      this.downloadLoading = true
       require.ensure([], () => {
-        const {
-            export_json_to_excel
-          } = require('vendor/Export2Excel')
+        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')
+        this.downloadLoading = false
       })
     },
     formatJson(filterVal, jsonData) {

src/views/excel/selectExcel.vue

@@ -1,34 +1,29 @@
 <template>
   <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 @selection-change="handleSelectionChange" ref="multipleTable">
+    <el-button style='margin-bottom:20px' type="primary" icon="document" @click="handleDownload" :loading="downloadLoading">导出已选择项</el-button>
+    <el-table :data="list" v-loading.body="listLoading" element-loading-text="拼命加载中" border fit highlight-current-row @selection-change="handleSelectionChange"
+      ref="multipleTable">
       <el-table-column type="selection" align="center"></el-table-column>
-
       <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>
@@ -39,7 +34,6 @@
   </div>
 </template>
 
-
 <script>
 import { getList } from 'api/article'
 
@@ -48,7 +42,8 @@ export default {
     return {
       list: null,
       listLoading: true,
-      multipleSelection: []
+      multipleSelection: [],
+      downloadLoading: false
     }
   },
   created() {
@@ -67,6 +62,7 @@ export default {
     },
     handleDownload() {
       if (this.multipleSelection.length) {
+        this.downloadLoading = true
         require.ensure([], () => {
           const { export_json_to_excel } = require('vendor/Export2Excel')
           const tHeader = ['序号', '文章标题', '作者', '阅读数', '发布时间']
@@ -75,10 +71,11 @@ export default {
           const data = this.formatJson(filterVal, list)
           export_json_to_excel(tHeader, data, '列表excel')
           this.$refs.multipleTable.clearSelection()
+          this.downloadLoading = false
         })
       } else {
         this.$message({
-          message: '请选择一条或多条记录导出',
+          message: '请至少选择一条记录',
           type: 'warning'
         })
       }