表格增加loading效果

src/pages/calendar/list/index.vue

 <template>
   <div class="list">
-    <el-table :data="listData" style="width: 100%" height="calc(100% - 32px)">
+    <el-table :data="listData" style="width: 100%" height="calc(100% - 32px)" v-loading="loading">
       <el-table-column label="会议时间" min-width="160" align="center">
         <template slot-scope="scope">
           <p style="color: #aeaeae">
@@ -88,7 +88,8 @@ export default {
       dateRange: [],
       curPage: 1,
       pageSize: 20,
-      total: 0
+      total: 0,
+      loading: false
     }
   },
   computed: {
@@ -163,7 +164,9 @@ export default {
         start_time: start,
         end_time: endPlus1
       }
+      this.loading = true
       getMeetingList(params).then((res) => {
+        this.loading = false
         if (res.code === 0 && res.data.data) {
           this.listData = res.data.data
           this.total = res.data.total

src/pages/search/index.vue

@@ -38,7 +38,7 @@
           </el-col>
         </el-row>
       </div>
-      <el-table :data="listData" style="width: 100%" height="calc(100% - 116px)">
+      <el-table :data="listData" style="width: 100%" height="calc(100% - 116px)" v-loading="loading">
         <el-table-column label="会议时间" min-width="160" align="center">
           <template slot-scope="scope">
             <p style="color: #aeaeae">
@@ -121,7 +121,8 @@ export default {
       listData: [],
       curPage: 1,
       pageSize: 20,
-      total: 200
+      total: 200,
+      loading: false
     }
   },
   computed: {
@@ -162,7 +163,7 @@ export default {
     fetchMeetingList() {
       const filter = this.filter
       let start, endPlus1
-      if (filter.length > 0) {
+      if (filter.timeRange.length > 0) {
         start = dateFormat(filter.timeRange[0])
         const end = filter.timeRange[1]
         endPlus1 = dateFormat(new Date(end.getFullYear(), end.getMonth(), end.getDate() + 1))
@@ -177,7 +178,9 @@ export default {
         start_time: start,
         end_time: endPlus1
       }
+      this.loading = true
       getMeetingList(params).then((res) => {
+        this.loading = false
         if (res.code === 0 && res.data.data) {
           this.listData = res.data.data
           this.total = res.data.total

src/pages/system/account/index.vue

@@ -2,7 +2,7 @@
   <div class="account">
     <h5>账号管理 <el-button style="float:right;margin:12px 30px 0 0" size="mini"  type="primary" plain @click="handleAdd" v-if="isSuperAdmin">添加账号</el-button></h5>
     <div class="inner">
-      <el-table :data="listData" style="width: 100%" height="calc(100% - 32px)">
+      <el-table :data="listData" style="width: 100%" height="calc(100% - 32px)" v-loading="loading">
         <el-table-column prop="userid" label="ID" min-width="120"></el-table-column>
         <el-table-column prop="username" label="名称" min-width="120"></el-table-column>
         <el-table-column prop="phone" label="手机号码" min-width="120"></el-table-column>
@@ -97,7 +97,8 @@ export default {
       },
       searchUsersloading: false,
       userList: [],
-      deleteId: ''
+      deleteId: '',
+      loading: false
     }
   },
   computed: {
@@ -170,7 +171,9 @@ export default {
         page: this.curPage,
         limit: this.pageSize
       }
+      this.loading = true
       getAccountList(params).then((res) => {
+        this.loading = false
         if (res.code === 0 && res.data.data) {
           this.listData = res.data.data
           this.total = res.data.total

src/pages/system/role/index.vue

@@ -5,7 +5,7 @@
       <!-- <el-button style="float: right; margin: 12px 30px 0 0" size="mini" type="primary" plain @click="handleAdd">添加角色</el-button> -->
     </h5>
     <div class="inner">
-      <el-table :data="listData" style="width: 100%" height="calc(100% - 32px)">
+      <el-table :data="listData" style="width: 100%" height="calc(100% - 32px)" v-loading="loading">
         <el-table-column prop="name" label="角色" min-width="140" v-if="!isSuperAdmin"></el-table-column>
         <el-table-column prop="display_name" label="角色名称" min-width="120"></el-table-column>
         <el-table-column prop="description" label="角色描述" min-width="120"></el-table-column>
@@ -49,7 +49,8 @@ export default {
       ],
       curPage: 1,
       pageSize: 20,
-      total: 0
+      total: 0,
+      loading: false
     }
   },
   computed: {
@@ -80,7 +81,9 @@ export default {
         page: this.curPage,
         limit: this.pageSize
       }
+      this.loading = true
       getRoles(params).then((res) => {
+        this.loading = false
         if (res.code === 0 && res.data.data) {
           this.listData = res.data.data
           this.total = res.data.total