会员转移保留分页选中数据

src/views/users/user/transfer.vue

@@ -74,7 +74,7 @@
     </el-row>
 
     <!-- 表格数据 -->
-    <el-table height="500" border v-loading="loading" :data="customerList" @selection-change="handleSelectionChange">
+    <el-table ref="transferTable" height="500" border v-loading="loading" :data="customerList" @select="handleSelect" @select-all="handleSelectAll">
       <el-table-column type="selection" width="55" align="center" />
       <el-table-column label="客户ID" align="center" prop="userId" />
       <el-table-column label="项目" align="center" prop="projectId">
@@ -178,6 +178,7 @@ export default {
       },
       projectOptions: [],
       selectedUser: [],
+      restoring: false,
     };
   },
   created() {
@@ -198,9 +199,26 @@ export default {
     getList() {
       this.loading = true;
       listUser(this.queryParams).then(response => {
-        this.customerList = response.rows;
+        this.restoring = true;
+        this.customerList = (response.rows || []).map(row => {
+          row._rowKey = row.userId + '_' + (row.projectId || 0) + '_' + (row.companyUserId || '0');
+          return row;
+        });
         this.total = response.total;
         this.loading = false;
+        this.$nextTick(() => {
+          const table = this.$refs.transferTable;
+          if (table) {
+            this.customerList.forEach(row => {
+              if (this.ids.includes(row._rowKey)) {
+                table.toggleRowSelection(row, true);
+              }
+            });
+          }
+          this.$nextTick(() => {
+            this.restoring = false;
+          });
+        });
       }).catch(() => {
         this.loading = false;
       });
@@ -220,19 +238,41 @@ export default {
     /** 搜索按钮操作 */
     handleQuery() {
       this.queryParams.pageNum = 1;
+      this.ids = [];
+      this.selectedUser = [];
       this.getList();
     },
     /** 重置按钮操作 */
     resetQuery() {
       this.resetForm("queryForm");
+      this.ids = [];
+      this.selectedUser = [];
       this.handleQuery();
     },
-    // 多选框选中数据
-    handleSelectionChange(selection) {
-      this.ids = selection.map(item => item.userId)
-      this.selectedUser = selection.map(item => {return {userId: item.userId, projectId: item.projectId}})
-      this.single = selection.length !== 1;
-      this.multiple = !selection.length;
+    // 多选框选中数据（手动跨页累积）
+    handleSelect(selection) {
+      if (this.restoring) return;
+      this.updateSelection(selection);
+    },
+    handleSelectAll(selection) {
+      if (this.restoring) return;
+      this.updateSelection(selection);
+    },
+    updateSelection(selection) {
+      const pageKeys = this.customerList.map(row => row._rowKey);
+      const otherIds = this.ids.filter(id => !pageKeys.includes(id));
+      const curIds = selection.map(item => item._rowKey);
+      this.ids = [...otherIds, ...curIds];
+
+      const curUsers = selection.map(item => ({userId: item.userId, projectId: item.projectId, companyUserId: item.companyUserId}));
+      const otherUsers = this.selectedUser.filter(u => {
+        const key = u.userId + '_' + (u.projectId || 0) + '_' + (u.companyUserId || '0');
+        return !pageKeys.includes(key);
+      });
+      this.selectedUser = [...otherUsers, ...curUsers];
+
+      this.single = this.ids.length !== 1;
+      this.multiple = !this.ids.length;
     },
 
     /** 转移按钮操作 */