修改组件登录策略

src/components/loginpolicy/index.vue

@@ -8,7 +8,7 @@
       <div class="paren_cont">
         <template v-if="dataList.length">
           <el-scrollbar style="height: 100%">
-            <el-row :gutter="24">
+            <el-row v-infinite-scroll="load" :infinite-scroll-distance="20" infinite-scroll-disabled="disabled" :gutter="24">
               <el-col :span="8" v-for="(item, index) in dataList" :key="index">
                 <div class="cide">
                   <div class="cide_header">
@@ -25,6 +25,10 @@
               </el-col>
             </el-row>
           </el-scrollbar>
+          <template v-if="total > 1">
+            <p class="center" v-if="loading">加载中...</p>
+            <!-- <p class="center" v-if="noMore">没有更多数据了~</p> -->
+          </template>
         </template>
         <template v-else>
           <el-empty :image-size="imageSize" description="暂无数据"></el-empty>
@@ -47,7 +51,10 @@ export default {
       listArray: [],
       itemData: [],
       pageNum: 1,
-      pageSize: 20
+      pageSize: 20,
+      total: null,
+      arrList: [],
+      loading: false
     };
   },
   props: {
@@ -83,6 +90,14 @@ export default {
       deep: true, // 可以深度检测到 obj 对象的属性值的变化
     },
   },
+  computed: {
+    noMore () {
+      return this.pageNum >= this.total
+    },
+    disabled () {
+      return this.loading || this.noMore
+    }
+  },
   created: function () {
     this.getTacList();
   },
@@ -113,6 +128,7 @@ export default {
     },
     getTacList () {
       return new Promise((resolve, reject) => {
+        this.loading = true;
         GetTacList({
           QueryName: "",
           PageSize: this.pageSize,
@@ -125,12 +141,17 @@ export default {
               datas.forEach((element) => {
                 element["checked"] = false;
               });
-              this.dataList = datas;
+              this.total = returnData.pages;
+              this.arrList.push(datas);
+              const arrs = this.arrList.flat();
+              this.dataList = arrs;
+              this.loading = false;
             }
             resolve();
           })
           .catch((error) => {
             reject(error);
+            this.loading = false;
           });
       });
     },
@@ -138,15 +159,24 @@ export default {
       if (data.checked == true) {
         // this.listArray = [];
         this.listArray.push(data);
-        this.$emit("get-checked-list", this.listArray);
+        this.$emit("getCheckedList", this.listArray);
       } else {
         this.listArray.splice(
           this.listArray.findIndex((item) => item.TacId === data.TacId),
           1
         );
-        this.$emit("get-checked-list", this.listArray);
+        this.$emit("getCheckedList", this.listArray);
       }
     },
+    //滚动加载数据
+    load () {
+      this.pageNum += 1;
+      this.getTacList({
+        QueryName: '',
+        PageSize: this.PageSize,
+        PageIndex: this.pageNum
+      });
+    }
   },
   mounted: function () { },
 };