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

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

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

效果如下图

大体思路

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

话不多说，上代码

<el-row :gutter="20">
        <el-col :span="8">
            <el-tree
              class="filter-tree"
              :data="treeData"
              :props="defaultProps"
              default-expand-all
              :filter-node-method="filterNode"
              :expand-on-click-node="false"
              ref="tree"
              @node-click="handleNodeClick"
            ></el-tree>
        </el-col>
        <el-col :span="16">
              <el-table
                ref="subcontractorTable"
                :data="tableData"
                tooltip-effect="dark"
                style="width: 100%"
                height="340"
                border
                @selection-change="subcontractorSelection"
                :row-key="getRowKeys"
              >
             .......
              </el-table>
              <el-pagination
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[10, 30, 50, 100]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
              ></el-pagination>
        </el-col>
      </el-row>
      <div style="height:60px;padding:20px;overflow-y:auto;">
        <el-tag
          style="margin-right:10px;"
          v-for="tag in relBox"
          :key="tag.User.id"
          closable
          type="primary"
          @close="handleClose(tag)"
        >{{tag.User.truename}}</el-tag>
      </div>

// 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();
          });
    },
}