解决vxe-table通过setCheckboxRow方法一次性改变多个节点选中状态导致页面卡死的问题

背景

1、一次性改变多个节点的选中状态，setCheckboxRow方法传入超100行，页面就会出现明显卡顿

解决方案

1、通过循环所有树节点，动态设置每个节点的checked状态，再调用loadData方法即可（响应毫秒级），loadData方法会保留之前的展开和收起状态，reloadData则会重新渲染整棵树，后面如果还有用到vxe-table的地方可以参考下这个方案！

vxe-table文档地址

function inverseTreeCheck() {
  console.time('反选操作')
  const xTable = this.$refs.treeRef.$refs.xTable
  //获取已选择行
  const checkedSet = new Set(xTable.getCheckboxRecords(true).map((e => e.treeId)))
  //循环树数据，动态设置checked勾选状态
  this.renderTreeData.forEach((e => {
      e['checked'] = !checkedSet.has(e.treeId)
    }
  ))
  // 调用loadData方法，刷新树形勾选状态
  xTable.loadData(this.renderTreeData).then((() => {
      this.$nextTick((() => {
          // 更新勾选成功回调
          this.reloadSearchTreeData(),
            this.debounceFilterChange()
        }
      ))
      console.timeEnd('反选操作')
    }
  ))
}

效果图