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-inputv-model="query"style="width: 240px;"placeholder="请输入关键字进行检索"@input="onQueryChanged"size="small"/><el-tree-v2ref="treeV"style="max-width: 800px":data="data":props="props"show-checkbox:filter-method="filterMethod":height="400"><template #default="{ node, data }"><!-- 自定义节点内容 --><el-popoverplacement="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);
}