Inverse selection function of el-tree tree
Application scenario: When there is a lot of data, you only want to check a few unwanted data, and then use the inverse selection function.
Legend effect: the upper tree component has three levels selected, and the lower tree component will be inversely selected.
Environment: vue2 + element-ui 2.15.9
the code
template part
<el-tree
:data="datatree"
:props="defaultProps"
show-checkbox
ref="tree"
node-key="rowGuid"
@check-change="reversetreeFun"
>
</el-tree>
<div>上面的树组件选中,下面树组件会相应的反选</div>
<el-tree
:data="datatree1"
:props="defaultProps"
show-checkbox
ref="inversetree"
node-key="rowGuid"
>
</el-tree>
script part
data() {
return {
defaultProps: {
children: "children",
label: "title"
},
datatree: [
{
title: "一级",
rowGuid: '1',
children: [
{
title: "二级",
rowGuid: '11',
children: [
{
title: "三级",
rowGuid: '111'
},
{
title: "三级",
rowGuid: '112'
}
]
},
{
title: "二级",
rowGuid: '12'
},
{
title: "二级",
rowGuid: '13'
}
]
}
],
datatree1:[
{
title: "一级",
rowGuid: '1',
children: [
{
title: "二级",
rowGuid: '11',
children: [
{
title: "三级",
rowGuid: '111'
},
{
title: "三级",
rowGuid: '112'
}
]
},
{
title: "二级",
rowGuid: '12'
},
{
title: "二级",
rowGuid: '13'
}
]
}
],
}
}
methods: {
batchSelect(nodes, refs, flag, seleteds) {
if (typeof nodes != "undefined") {
nodes.forEach((element) => {
refs.setChecked(element, flag, true);
});
}
if (typeof seleteds != "undefined") {
seleteds.forEach((node) => {
refs.setChecked(node, !flag, true);
});
}
},
reversetreeFun() {
let reversetree = this.$refs.inversetree;
this.datatree1 = this.datatree;
let nodes = this.$refs.tree.getCheckedNodes(true, true)
this.batchSelect(this.datatree1, reversetree, true, nodes);
let firstTreeData = this.$refs["tree"].getCheckedKeys();
// firstTreeData 为第一个树组件选中的数据id集合
let secondTreeData = this.$refs["inversetree"].getCheckedKeys();
// secondTreeData 为第二个树组件选中的数据id集合
},
}