使用场景:
需要一个 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);
}