700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > elment-tree 树组件功能实现: 实现父节点选中 而子节点不选中;子节点选中 父节

elment-tree 树组件功能实现: 实现父节点选中 而子节点不选中;子节点选中 父节

时间:2021-10-17 03:10:49

相关推荐

elment-tree 树组件功能实现: 实现父节点选中 而子节点不选中;子节点选中 父节

前言:

需求为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 树组件功能实现: 实现父节点选中 而子节点不选中;子节点选中 父节点选中;子节点全部取消 父节点不取消;父节点取消 子节点全去选

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。