Element Tree组件实现完美的联动选择

Element Tree组件默认支持【联动选择】,但是无法【只选中父项,不选任何子项】,这里介绍如何实现完美的联动选择。

关闭自带的【联动选择 】特性

ElTree的check-strictly属性默认为false,至少一个子项被勾选时,父项会进入半选中/选中状态。
semMqO.gif

改为true即可实现【只选中父项,不选任何子项】,后面自行实现联动。
semCrT.gif

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<el-form-item label="授权">
<el-tree
ref="permissionTree"
:data="permissionTree"
:props="treeProps"
:default-checked-keys="checkedIds"
node-key="id"
:expand-on-click-node="false"
default-expand-all
check-on-click-node
check-strictly
show-checkbox
/>
</el-form-item>

监听check事件实现【联动选择】

semBdg.gif

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<el-form-item label="授权">
<el-tree
ref="permissionTree"
:data="permissionTree"
:props="treeProps"
:default-checked-keys="checkedIds"
node-key="id"
:expand-on-click-node="false"
default-expand-all
check-on-click-node
check-strictly
show-checkbox
@check="handleCheckNode"
/>
</el-form-item>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
handleCheckNode(obj) {
if (this.$refs.permissionTree.getCheckedKeys().indexOf(obj.id) !== -1) {
this.checkParentNode(obj); // 勾选父项
this.checkChildrenNode(obj, true); // 全选子项
} else {
if (obj.children) {
this.checkChildrenNode(obj, false); // 所有子项反选
}
}
},
checkChildrenNode(obj, isChecked) {
this.$refs.permissionTree.setChecked(obj.id, isChecked);
if (obj.children) {
for (let i = 0; i < obj.children.length; i++) {
this.checkChildrenNode(obj.children[i], isChecked);
}
}
},
checkParentNode(obj) {
const node = this.$refs.permissionTree.getNode(obj);
if (node.parent.key !== undefined) {
this.$refs.permissionTree.setChecked(node.parent, true);
this.checkParentNode(node.parent);
}
},

自由选择和关联选择共存

以权限树为例,在某些授权场景,用户希望只选中父项。经过第2步的处理已经能实现,但是体验较差(需要选择反选子项)。
这时候没有联动选择反而效率更高,所以【自由选择】和【关联选择】两个特性如果能共存,就能应对更多场景。

实现很简单,只需要将监听的事件改成node-check即可。点击节点是关联选择,点击勾选框是自由选择(即最原始的勾选框)。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<el-form-item label="授权">
<el-tree
ref="permissionTree"
:data="permissionTree"
:props="treeProps"
:default-checked-keys="checkedIds"
node-key="id"
:expand-on-click-node="false"
default-expand-all
check-on-click-node
check-strictly
show-checkbox
@node-check="handleCheckNode"
/>
</el-form-item>

seKkdS.gif