el-tree和el-table多选实现人员多选，并做回显，在回显区删除人员，表格同时取消选中状态

el-tree和el-table多选实现人员多选，并做回显，在回显区删除人员，表格同时取消选中状态

1、左树又表，左边树节点切换，table显示节点下对应的人员，并做分页显示
2、下方回显区显示已经勾选的人员，不受树节点切换和页码切换影响
3、回显区人员删除，对应树节点下的表格中人员选中状态改为非选中

效果如下图

大体思路

1、把回显区删除的数据进行存储
2、然后tableData更新以后就查找是否包含回显区删除的数据，包含的话就取消对应数据的选中效果

话不多说，上代码

        
            
        
        
              
             .......
              
              
        
      
      

        {{tag.User.truename}}
      

// An highlighted block
data() {
    return {
    	subcontractorMultiple: [], // el-table数据勾选数据存储
        relBox: [], // 回显区的数据
        removeDatas:[], // 存储回显区删除时的数据
   }
 }
methods:{
// el-table 多个勾选时
    subcontractorSelection(val) {
      // 选择数据暂存
      this.subcontractorMultiple = JSON.parse(JSON.stringify(val));
      this.relBox = JSON.parse(JSON.stringify(val));
    },
	// 回显区数据删除
    handleClose(tag) {
      // 删除标签渲染的数组
      this.relBox.splice(
        this.relBox.findIndex(item => item.User.id == tag.User.id),
        1
      );
      // 删除列表选中数组存储的数组
      this.subcontractorMultiple.splice(
        this.relBox.findIndex(item => item.User.id == tag.User.id),
        1
      );
      // 将标签删除的对应列表行数据存储
      this.removeDatas.push(tag);
      this.changeRowStatus();
    },
    // 取消Table选中项
    changeRowStatus() {
      this.removeDatas.length &&
        this.removeDatas.forEach(data => {
          let _index = this.tableData.findIndex(i => i.User.id == data.User.id);
          if (_index > -1) {
            this.$refs.subcontractorTable.toggleRowSelection(
              this.tableData[_index],
              false
            );
          }
        });
    },
    // 获取table数据
    getTableData(id) {
      ........
      // 在成功的回调里赋值并调一下取消Table选中项的方法：this.changeRowStatus()
          this.tableData = response.data ? response.data.data : [];
          this.total = response.data ? response.data.total : 0;
          this.$nextTick(() => {  // 这个一定要加，因为要在dom元素渲染完整以后
            this.removeDatas.length && this.changeRowStatus();
          });
    },
}