vxe-table 在checkRowKeys 数量很大时卡死

vxe-table 在checkRowKeys 数量很大时卡死

解决办法如下,自己手动实现勾选回显
配置 checkbox-config 中的 checkField 和 indeterminateField,其中 半选indeterminateField 由样式问题,解决办法为手动更新 treeIndeterminateMaps 的状态.

  //template
   <vxe-table
      ref="xTable"
      :scroll-y="{ enabled: true, gt: 20 }"
      :row-config="{ keyField: 'id' }"
      :tree-config="{ childrenField: 'children' }"
      :edit-config="{ trigger: 'click', mode: 'row' }"
      :checkbox-config="{
        labelField: 'name',
        checkField: 'checkField',
        indeterminateField: 'indeterminateField',
      }"
      @checkbox-change="selectChangeEvent"
    ></vxe-table>

	//获取数据后处理
    //自定义处理勾选
      const statusMap = {};
      this.selectList.map((el) => {
        statusMap[el.id] = true;
      });
      this.customEachTree(data.data, (el) => {
      	//计算全选
        if (statusMap[el.id]) {
          el.checkField = true;
        } else {
          el.checkField = false;
        }
        if (el.children) {
        //处理父级的全选,半选
          el.checkField = el.children.reduce((val, current) => val && current.checkField, true);
          el.indeterminateField =
            el.children.reduce((val, current) => val || current.checkField, false) ||
            el.children.reduce((val, current) => val || current.indeterminateField, false);
          if (el.indeterminateField && !el.checkField) {
            this.$refs.xTable.treeIndeterminateMaps[el.id] = true;
          }
        }
    });

    customEachTree(list, callback) {
      for (const element of list) {
        if (element.children) {
          this.customEachTree(element.children, callback);
        }
        if (callback) callback(element);
      }
    },