表格增加loading状态

src/pages/main/antiSpoofing/channel.vue

@@ -11,7 +11,7 @@
                 </div>
             </div>
             <div class="tabbox">
-                <el-table :key="key" :height="height" class="com-table" ref="multipleTable" :data="tableData"
+                <el-table :loading="loading" :key="key" :height="height" class="com-table" ref="multipleTable" :data="tableData"
                           tooltip-effect="dark" size="small" border style="width: 100%" :header-cell-style="headerStyleFun" :cell-style="cellStyle">
                     <el-table-column align="center" :label="toolTit">
                         <el-table-column prop="cityName" align="center" label="地市" >
@@ -89,7 +89,8 @@
                 },
                 provincialCompany:false,
                 height:"calc(100% - 40px)",
-                key:0
+                key:0,
+                loading:false
             }
         },
         methods: {
@@ -174,7 +175,12 @@
                     }else {
                         this.tableData = res.data.data;
                         this.total = res.data.totalRecord;
+                        this.loading = false;
                     }
+                }).catch(() => {
+                    this.tableData = []
+                    this.total = 0
+                    this.loading = false;
                 });
             },
             // 分页

src/pages/main/antiSpoofing/districtCounty.vue

@@ -11,7 +11,7 @@
                 </div>
             </div>
             <div class="tabbox">
-                <el-table :key="key" height="calc(100% - 40px)" class="com-table" ref="multipleTable" :data="tableData"
+                <el-table :loading="loading" :key="key" height="calc(100% - 40px)" class="com-table" ref="multipleTable" :data="tableData"
                     tooltip-effect="dark" size="small" border style="width: 100%" :header-cell-style="headerStyleFun" :cell-style="cellStyle">
                     <el-table-column align="center" :label="toolTit">
                         <el-table-column prop="cityName" align="center" label="地市" >
@@ -79,7 +79,8 @@
                     typexz:"xlsx"
                 },
                 provincialCompany:false,
-                key:0
+                key:0,
+                loading:false
             }
         },
         methods: {
@@ -164,7 +165,12 @@
                     }else {
                         this.tableData = res.data.data;
                         this.total = res.data.totalRecord;
+                        this.loading = false;
                     }
+                }).catch(() => {
+                    this.tableData = []
+                    this.total = 0
+                    this.loading = false;
                 });
             },
             // 分页

src/pages/main/antiSpoofing/personnel.vue

@@ -11,7 +11,7 @@
                 </div>
             </div>
             <div class="tabbox">
-                <el-table :key="key" :height="height" class="com-table" ref="multipleTable" :data="tableData"
+                <el-table :loading="loading" :key="key" :height="height" class="com-table" ref="multipleTable" :data="tableData"
                           tooltip-effect="dark" size="small" border style="width: 100%" :header-cell-style="headerStyleFun" :cell-style="cellStyle">
                     <el-table-column align="center" :label="toolTit">
                         <el-table-column prop="cityName" align="center" label="地市" >
@@ -86,7 +86,8 @@
                 },
                 provincialCompany:false,
                 height:'calc(100% - 40px)',
-                key:0
+                key:0,
+                loading:false
             }
         },
         methods: {
@@ -171,7 +172,12 @@
                     }else {
                         this.tableData = res.data.data;
                         this.total = res.data.totalRecord;
+                        this.loading = false;
                     }
+                }).catch(() => {
+                    this.tableData = []
+                    this.total = 0
+                    this.loading = false;
                 });
             },
             // 分页

src/pages/main/antiSpoofing/standingBook.vue

@@ -7,7 +7,7 @@
                 </el-button>
             </div>
             <div class="tabbox">
-                <el-table height="100%" class="com-table" ref="multipleTable" :data="tableData" :show-summary="true" :summary-method="getSummaries"
+                <el-table :loading="loading" height="100%" class="com-table" ref="multipleTable" :data="tableData" :show-summary="true" :summary-method="getSummaries"
                     tooltip-effect="dark" size="small" border style="width: 100%" :header-cell-style="headerStyleFun" :cell-style="cellStyle">
                     <el-table-column prop="cityName" align="center" fixed="left" label="地市"></el-table-column>
                     <el-table-column align="center" width="800px" :label="tooltit">
@@ -76,6 +76,7 @@
                 pageSize: 1,
                 tableData: [],
                 params: new FormData(),
+                loading:false
             }
         },
         methods: {
@@ -121,6 +122,7 @@
             },
             //获取列表
             getList(v, n) {
+                this.loading = true
                 this.pageSize = n;
                 this.$http({
                     url: "/market/antiSpoofing/getAllStandingBook",
@@ -141,7 +143,12 @@
                         })
                         this.tableData = res.data.data;
                         this.total = res.data.totalRecord;
+                        this.loading = false
                     }
+                }).catch(() => {
+                    this.tableData = []
+                    this.total = 0
+                    this.loading = false;
                 });
             },
             outList() {