多选解绑和绑定

src/views/material/ma/typeConfigKeeper/index.vue

@@ -144,6 +144,8 @@
           default-expand-all
           :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
           @selection-change="handleSelectionChange"
+          @select="handlerSelect" 
+          @select-all="handlerSelectAll"
         >
           <el-table-column
             type="selection"
@@ -321,6 +323,7 @@ export default {
       userNoList:[],
       userIdTemp: -1,
       typeIdTemp: -1,
+      maxLength:100,//已选列表上限，防止数据过多请求报错
       // 查询参数
       queryParams: {
         typeName: undefined,
@@ -529,21 +532,95 @@ export default {
 
     },
 
-      // //单选操作-跨页
-      // handlerSelect(val, row) {
-      //   this.ids.indexOf(row.deviceCode) === -1
-      //     ? this.currentSelection.push(row.deviceCode)
-      //     : this.currentSelection.splice(this.currentSelection.indexOf(row.deviceCode), 1)
-      // },
-    handleSelect(selection, row) {
-      this.toggleSelection(selection, row);
-    },
-    handleSelectAll(selection) {
-      this.isAllSelect = !this.isAllSelect;
-      let data = this.typeList;
-      this.toggleSelect(data,this.isAllSelect,'all');
+      //单选操作-跨页
+      handlerSelect(val, row) {
+        const index = this.userList.findIndex(item=>item.typeId===row.typeId);
+        if(this.ids.indexOf(row.typeId) === -1){
+          this.userList.push({'typeId':row.typeId,'userId':this.userIdTemp})
+        }else if(index!== -1){
+            this.userList.splice(index,1);
+        }
+        const indexNo = this.userNoList.findIndex(item=>item.typeId===row.typeId);
+        if(this.ids.indexOf(row.typeId) === -1){
+          this.userNoList.push({'typeId':row.typeId,'userId':row.keeperUserId})
+        }else if(indexNo!== -1){
+            this.userNoList.splice(indexNo,1);
+        }
+      },
+
+        //全选操作-跨页
+        handlerSelectAll(val) {
+          if (val.length) {
+            // 进来此处说明:
+            // 1 当前页的全选 2 其他页有数据然后当前页的取消全选
+            // 比较全选或者取消全选与当前页的数据，得到差集
+            // 如果tableData中的数据在val中不存在，则说明是取消全选，需要从currentSelection中移除
+            // 如果tableData中所有的数据都在val中存在，则说明是全选，需要将差集添加到currentSelection中
+            const isAllSelect = this.tableData.every(item =>
+            val.some(valItem => valItem.typeId === item.typeId)
+            )
+            if (isAllSelect) {
+              // 全选中新增的差集
+              const diff = val.filter(
+              item => !this.userList.some(user => user.typeId === item.typeId)
+            )
+            if (this.userList.length + diff.length > this.maxLength) {
+              const spaceLeft = this.maxLength - this.userList.length
+              const toAdd = diff.slice(0,spaceLeft)
+                this.userList = this.userList.concat(toAdd.map(item =>({
+                  typeId:item.typeId,
+                  userId:this.userIdTemp
+                })));
+                diff.slice(spaceLeft).forEach(item => this.$refs.multipleTable.toggleRowSelection(item, false))
+            } else {
+                this.userList = this.userList.concat(diff.map(item=>({
+                  typeId:item.typeId,
+                  userId:this.userIdTemp
+                })))
+            }
+
+                          // 全选中新增的差集
+              const diffNo = val.filter(
+              item => !this.userNoList.some(user => user.typeId === item.typeId)
+            )
+            if (this.userNoList.length + diff.length > this.maxLength) {
+              const spaceLeft = this.maxLength - this.userNoList.length
+              const toAdd = diff.slice(0,spaceLeft)
+                this.userNoList = this.userNoList.concat(toAdd.map(item =>({
+                  typeId:item.typeId,
+                  userId:item.userId
+                })));
+                diff.slice(spaceLeft).forEach(item => this.$refs.multipleTable.toggleRowSelection(item, false))
+            } else {
+                this.userNoList = this.userNoList.concat(diff.map(item=>({
+                  typeId:item.typeId,
+                  userId:item.userId
+                })))
+            }
+            } else {
+                this.userList = this.userList.filter(
+                  user => !this.tableData.some(item => item.typeId === user.typeId)
+                )
+                this.userNoList = this.userNoList.filter(
+                  user => !this.tableData.some(item => item.typeId === user.typeId)
+                )
+              }
+          } else {
+            // 进来此处说明:
+            // 其他页并无勾选数据，且当前页取消勾选
+            this.userList = []
+            this.userNoList = []
+          }
+        },
+    // handleSelect(selection, row) {
+    //   this.toggleSelection(selection, row);
+    // },
+    // handleSelectAll(selection) {
+    //   this.isAllSelect = !this.isAllSelect;
+    //   let data = this.typeList;
+    //   this.toggleSelect(data,this.isAllSelect,'all');
       
-    },
+    // },
 
       // //选择某行
       //   selectTr(selection,row){