element tree和table联动，table勾选、回显、删除功能遇到问题记录

根据tree节点获取表格数据，最右侧展示选中的表格数据
在此之前一通过接口获取对应页面的历史数据（需在左侧表格和右侧表格回显勾选状态与数据）也可再次勾选与删除
坑：最初设计右侧根据左侧表格数据来渲染，但是这样切换tree节点刷新左侧表格右侧数据重新获取只能展示当前节点下已选中数据，无法全部展示，而且在type="selection"这个列里添加reserve-selection属性（添加了reserve-selection属性一定要加row-key属性，最好以id为row-key），el-table会记住你勾选的行，保存在el-table组件里面的selection属性里，那么在你使用toggleRowSelection回显列表数据时被动触发selection-change事件导致选择数据重复


去重后页面数据是对的，但是删除时左边表格数据取消勾选状态还是会触发selection-change事件，所以删除会出现点击多次才生效

1. 试了很多种办法，最终还是从设计思路入手，选择把右侧摘出来，直接展示全部数据，左侧表格来根据右侧数据进行回显（不管是解决前还是解决后都有用到vuex）
2. 被动触发selection-change事件导致选择数据重复问题如何解决？？
   加锁！！！ 借鉴el-table toggleRowSelection被动触发select/selection-change事件的解决方案
3. 下面是部分代码
   vuex页面：

 deviceDefaultChecked(state, params) {
      console.log(state, params);
      let arr = state.addList.concat(
        params
      );
      const map = new Map();
      const uniqueArray = arr.filter((v) => {
        if (v && !map.has(v.id)) {
          map.set(v.id, true);
          return true;
        }
        return false;
      });
      state.rgihtStore = uniqueArray
      console.log(state.rgihtStore, 'state.rgihtStore---vuex');
      state.deviceList = [...new Set(params)];
    },
      // 监听到新勾选的数据
	deviceRgiht(state, params) {
      console.log(params, state.deviceList, 'params设备右侧2222');
      let arr = state.deviceList.concat(
        params
      );
      const map = new Map();
      const uniqueArray = arr.filter((v) => {
        if (v && !map.has(v.id)) {
          map.set(v.id, true);
          return true;
        }
        return false;
      });
      state.rgihtStore = uniqueArray
    },

右侧监听左侧存在vuex中新选中数据用来实时更新右侧表格，监听到数据和历史数据一起存在vuex中rgihtStore 里
右侧表格页面：

 watch: {
 	// 对vuex中state的值进行监听和处理
    "$store.state.rgihtStore": function (newVal, oldVal) {
        // 在这里可以对vuex中rgihtStore的值进行监听和处理
        this.getRightList(newVal);
     },
    "$store.state.addList": function (newVal, oldVal){
       // 在这里可以对左侧存在vuex中新选中数据进行监听和处理
       this.$store.commit("deviceRgiht", newVal);
     },
    //监听一下列表数据存到vuex中左侧用户列表回显
    rightDataArray(newVal, oldVal) {
      this.$store.commit("newRgihtList", newVal);
    },
    deep: true,
  },
  mounted() {
  //进页面记得默认调一次
    this.getRightList(this.$store.state.rgihtStore);
  },
  methods: {
	//获取右侧列表数据
    getRightList(val) {
      this.rightDataArray = val;//列表绑定数组
    },
  },

另外！不管是使用toggleRowSelection回显还是取消状态一定要用el-table的data数据，不然无法生效！！！！
最后记得在左侧表格页面监听一下vuex中newRgihtList，不然数据全部删除后左侧列表全选框仍然是半选状态，需要我们手动

左侧表格页面：

data() {
    return {
     rowSelectFlag: false // 禁止toggleRowSelection默认触发handleSelectionChange
    }
 }，
 watch: {
     tableList(newVal, oldVal) {
     //左侧列表数据监听（分页是假分页，主要是监听tree节点切换左侧列表刷新后数据）
      this.showCheck(newVal, this.$store.state.rgihtArray);
    },
    "$store.state.newRgihtList": function (newVal, oldVal) {
      // 在这里可以对vuex中state的值进行监听和处理
      console.log("New newRgihtList-value: ", newVal);
      console.log("Old newRgihtList-value: ", oldVal);
      this.showCheck(this.tableList, newVal);//列表回显方法
      if (newVal.length == 0) {
        this.$nextTick(() => {
          this.$refs.multipleTable.clearSelection();//清除复选框勾选状态
        });
      }
    },
    // 开启深度监听
    deep: true,
  }，
  mounted() {
    this.showCheck(this.tableList, this.$store.state.rgihtArray);
  },
  methods: {
  	//回显的时候默认选中两个参数一个左侧列表数据一个vuex中存的用于左侧表格回显的数据
    showCheck(tableList, arr) {
      setTimeout(() => {
        this.rowSelectFlag = true;
        tableList.forEach((row) => {
          const matchedIndex = arr.findIndex((item) => item.id == row.id);
          // console.log(matchedIndex, "matchedIndex");
          this.$refs["multipleTable"].toggleRowSelection(
            row,
            matchedIndex != -1
          );
        });
        this.rowSelectFlag = false;
      }, 0);
    },
  }，