筛选增加分页

src/views/wordcard/cread.vue

@@ -41,6 +41,7 @@
               @click="
                 filtCardflag = true;
                 showRowLength = newEditTable.length > 4 ? 6 : newEditTable.length;
+                showRowLengths = newEditTable.length > 4 ? 6 : newEditTable.length;
               "
               v-else
               >筛选</el-button
@@ -54,20 +55,24 @@
       </div>
       <div
         class="content"
-        :class="[editCardflag ? '' : 'content-flex content-flex-' + showRowLength]"
+        :class="[
+          editCardflag ? '' : 'content-flex ',
+          filtCardflag ? 'content-flex-' + showRowLengths : 'content-flex-' + showRowLength,
+        ]"
         :style="{ minHeight: innerHeight - 220 + 'px' }"
       >
         <div
-          v-for="(item, index) in filtCardflag ? newEditTable : filtTableShow"
+          v-for="(item, index) in filtCardflag ? filtTableShows : filtTableShow"
           :key="index"
           :class="[editCardflag ? '' : 'item-flex']"
         >
           <writeTable
+            :key="filtCardflag ? currentPages + index : currentPage + index"
             :editCardflag="editCardflag"
             :dataConfig="writeTableData"
             :data="item"
             :pageNumber="index + 1"
-            :totalNumber="showRowLength"
+            :totalNumber="filtCardflag ? showRowLengths : showRowLength"
             :isPreview="true"
             @handleDelItem="handleDelItem"
             :filtCardflag="filtCardflag"
@@ -79,6 +84,17 @@
       </div>
       <el-pagination
         background
+        :current-page="currentPages"
+        :page-size="showRowLengths"
+        :page-sizes="[1, 2, 3, 4, 6]"
+        :total="newEditTable.length"
+        layout="total, prev, pager, next, sizes, jumper"
+        @size-change="(val) => handleSizeChange(val, 'showRowLengths', 'currentPages')"
+        @current-change="(val) => handleCurrentChange(val, 'currentPages')"
+        v-if="filtCardflag"
+      />
+      <el-pagination
+        background
         :current-page="currentPage"
         :page-size="showRowLength"
         :page-sizes="[1, 2, 3, 4, 6]"
@@ -202,6 +218,7 @@ export default {
       ],
       showLeft: true,
       showRowLength: 1, // 一页展示几个，有一行一列，一行两列，一行三列和两行两列
+      showRowLengths: 1, // 一页展示几个，有一行一列，一行两列，一行三列和两行两列
       showRoeText: {
         1: '一行一列',
         2: '一行两列',
@@ -213,8 +230,10 @@ export default {
       filtCardflag: true, // 筛选状态
       filtTable: [], // 筛选卡片
       filtTableShow: [], //分页后的筛选卡片
+      filtTableShows: [], //分页后的筛选卡片
       filtId: [], // 筛选卡片id数组
       currentPage: 1,
+      currentPages: 1,
       showCard: false, //卡片放大
       showIndex: null, // 卡片放大索引
     };
@@ -303,6 +322,7 @@ export default {
             this.editCardflag = false;
             this.$message.success('保存成功');
             this.showRowLength = this.newEditTable.length > 4 ? 6 : this.newEditTable.length;
+            this.showRowLengths = this.newEditTable.length > 4 ? 6 : this.newEditTable.length;
           })
           .catch((res) => {
             this.loading.close();
@@ -331,6 +351,7 @@ export default {
             this.editCardflag = false;
             this.$message.success('保存成功');
             this.showRowLength = this.newEditTable.length > 4 ? 6 : this.newEditTable.length;
+            this.showRowLengths = this.newEditTable.length > 4 ? 6 : this.newEditTable.length;
           })
           .catch((res) => {
             this.loading.close();
@@ -357,6 +378,11 @@ export default {
           });
           this.loading = false;
           this.showRowLength = this.newEditTable.length > 4 ? 6 : this.newEditTable.length;
+          this.showRowLengths = this.newEditTable.length > 4 ? 6 : this.newEditTable.length;
+          this.filtTableShows = JSON.parse(JSON.stringify(this.newEditTable)).splice(
+            (this.currentPages - 1) * this.showRowLengths,
+            this.showRowLengths,
+          );
         })
         .catch((res) => {
           this.loading = false;
@@ -514,6 +540,7 @@ export default {
       this.filtTable.slice().reverse();
       this.filtCardflag = false;
       this.showRowLength = this.filtTable.length > 4 ? 6 : this.filtTable.length;
+      this.showRowLengths = this.filtTable.length > 4 ? 6 : this.filtTable.length;
       this.getList();
     },
     handleSizeChange(val, type, page) {
@@ -526,10 +553,17 @@ export default {
       this.getList();
     },
     getList() {
-      this.filtTableShow = JSON.parse(JSON.stringify(this.filtTable)).splice(
-        (this.currentPage - 1) * this.showRowLength,
-        this.showRowLength,
-      );
+      if (this.filtCardflag) {
+        this.filtTableShows = JSON.parse(JSON.stringify(this.newEditTable)).splice(
+          (this.currentPages - 1) * this.showRowLengths,
+          this.showRowLengths,
+        );
+      } else {
+        this.filtTableShow = JSON.parse(JSON.stringify(this.filtTable)).splice(
+          (this.currentPage - 1) * this.showRowLength,
+          this.showRowLength,
+        );
+      }
     },
     zoomInCard(index) {
       this.showIndex = index;
@@ -603,8 +637,10 @@ export default {
         this.filtCardflag = true; // 筛选状态
         this.filtTable = []; // 筛选卡片
         this.filtTableShow = []; //分页后的筛选卡片
+        this.filtTableShows = []; //分页后的筛选卡片
         this.filtId = []; // 筛选卡片id数组
         this.currentPage = 1;
+        this.currentPages = 1;
         this.showCard = false; //卡片放大
         this.showIndex = null; // 卡片放大索引
       }