前言:
需求为el-tree组件中显示选择框,父节点选中时子节点不选中,子节点选中时父节点选中;子节点全部取消而父节点不取消;父节点取消,子节点全去选。
在网上浏览一些资料实现后,写这篇文章来总结记录一下~
实现关键
1. 使用check-strictly属性取消父子级相关联关系
2.使用check事件函数编写逻辑
注意:使用方法前必须设置 node-key 属性
代码实现
<el-treeref="tree"show-checkbox:data="menuTreeData":props="treeProps":check-strictly = "true"node-key="id"@check="checkChange"></el-tree>
// 通过check的回调里面获取节点id,再获取节点的node对象checkChange(data) {//根据key拿到Tree组件中的node节点const node = this.$refs.tree.getNode(data.id)//调用节点处理方法this.setNode(node)},//递归设置子节点和父节点setNode(node) {if (node.checked) {//如果当前是选中checkbox,则递归设置父节点和父父节点++选中this.setParentNode(node)} else {//如果当前是取消选中checkbox,则递归设置子节点全部取消选中this.setChildNode(node)}},//递归设置父节点全部选中setParentNode(node) {if (node.parent) {//循环对象的parent属性,设对象节点选择框为选中状态for (const key in node) {if (key === 'parent') {node[key].checked = true//递归调用相应父节点处理函数this.setParentNode(node[key])}}}},//递归设置子节点全部取消选中setChildNode(node) {if (node.childNodes && node.childNodes.length) {//将此节点下所有子节点设为选中状态node.childNodes.forEach(item => {item.checked = false//递归调用相应子节点处理函数this.setChildNode(item)})}},
elment-tree 树组件功能实现: 实现父节点选中 而子节点不选中;子节点选中 父节点选中;子节点全部取消 父节点不取消;父节点取消 子节点全去选