Tree-V2 实现 全选、反选

使用场景：

需要一个 tree 树形结构体，但是采用 普通的 tree ，在数据量大的时候 会造成 tree 渲染的压力，尤其是在勾选的时候。

element ui plus 中 引入了 “Tree V2 虚拟化树形控件” 具体的内容可以 参考这里

<el-button @click="selectAll" size="small" type="primary">全选</el-button>
<el-button @click="deselectAll" size="small" type="primary">反选</el-button>

      <div style="margin-top: 15px">
        <el-input
            v-model="query"
            style="width: 240px;"
            placeholder="请输入关键字进行检索"
            @input="onQueryChanged"
            size="small"
        />
        <el-tree-v2
            ref="treeV"
            style="max-width: 800px"
            :data="data"
            :props="props"
            show-checkbox
            :filter-method="filterMethod"
            :height="400"
        >
          <template #default="{ node, data }">
            <!-- 自定义节点内容 -->

            <el-popover
                placement="right"
                :width="200"
                trigger="hover"
                :content="data.label"
                :effect="'dark'"
                :show-after="500"
            >
              <template #reference>
                <span>{{ data.label }}</span>
              </template>
            </el-popover>
          </template>
        </el-tree-v2>

其中

getCheckedNodes() 返回 获取所有勾选的 id

setCheckedKeys() 设置勾选的id

const setAllNodeChecked = (checked) => {
  console.log(treeV.value.getCheckedNodes(), 'treeV.value')
  console.log(treeV.value, 'treeV.value')
  if (treeV.value) {
    // 全选
    const nodes = treeV.value.getCheckedNodes()
    if (checked) {
      const checkTargetArray = nodes.filter(item => item.level === 1).length;
      if (checkTargetArray === data.value.length) {
        treeV.value.setCheckedKeys([])
      } else {
        // 选中的 key 的数组
        const allKeys = data.value.map(node => node.id);
        treeV.value.setCheckedKeys(allKeys);
      }
    } else {
      // 过滤出未选中的数组
      const unCheckedArray = differenceBy(data.value, nodes, 'id')
      // 选中的 key 的数组
      const allKeys = unCheckedArray.map(node => node.id);
      // 设置所有节点为选中状态
      treeV.value.setCheckedKeys(allKeys);
    }
  }
}

// arr1 - arr2 的差集
function differenceBy(arr1, arr2, prop) {
  const set = new Set(arr2.map(item => item[prop]));
  console.log(set, 'set')
  return arr1.filter(item => !set.has(item[prop]));
}

const setCheckedRecursive = (node, checked) => {
  node.checked = checked;
  console.log(node.checked, 'node.checked')
  if (node.children) {
    node.children.forEach(child => {
      setCheckedRecursive(child, checked);
    });
  }
}

// 全选
const selectAll = () => {
  setAllNodeChecked(true);
}
// 反选
const deselectAll = () => {
  setAllNodeChecked(false);
}