element-ui中el-tree树节点的级联操作(取消子节点,父节点不变)
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
首先,这个tree节点操作中,选中了父节点,会默认选中全部子节点,某个子节点没选中,那么所有父节点都为半选状态。
半选状态时,使用this.$refs.tree.getCheckedKeys()是获取不到半选状态节点的id的。
现在需求是:选中父节点,子节点全部选中,取消某个子节点,父节点不变。
关键点是 @check-change事件和this.$refs.tree.setChecked()方法
@check-change:节点选中状态发生变化时的回调,共三个参数,依次为:传递给 data属性的数组中该节点所对应的对象、节点本身是否被选中、节点的子树中是否有被选中的节点this.$refs.tree.setChecked:通过 key / data 设置某个节点的勾选状态,使用此方法必须设置 node-key 属性,(key/data, checked, deep) 接收三个参数,1. 勾选节点的 key 或者 data 2. boolean 类型,节点是否选中 3. boolean 类型,是否设置子节点 ,默认为 false
核心代码:
checkChange(a,b,c){
console.log(a,b,c);
b?this.findchildren(a,b):''
},
findchildren(current){
this.$refs.tree.setChecked(current.id,true,true);
let d=current.children;
if(d.length>0){
d.forEach(a =>{
this.findchildren(a);
})
}
},
最后效果如图:
GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:2 个月前 )
c345bb45
6 个月前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 7 个月前
更多推荐
已为社区贡献2条内容
所有评论(0)