首先,这个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);
})
}
},
最后效果如图: