主要也是记录下。
最近在使用el-tree组件时遇到个问题。在lazy、show-checkbox模式下,设置default-checked-keys后,点击展开竟然出bug了。
来龙去脉是这样的:
我有一个父级节点,它有三个子节点,父级节点点击后会加载这三个子级节点;假设三个子节点分别为1、2、3,当我default-checked-keys = [1,2];即应该默认选中1和2,但是实际效果却是子级全部被选中。
可能很多人会认为我是不是有其他配置导致,比如说设置了check-on-click-node=true、node-click方法有处理等等,其实都是没有的,所以我自己也很纳闷。于是就断点查了下default-checked-keys里存入的值,确实也只有1和2这两个key值,所以也就彻底无解了。。
说说解决办法吧。
另辟蹊径:既然在点击展开时会出问题那就监听一下node-expand这个方法吧;节点被展开时触发的事件,共三个参数,依次为:传递给 data 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身。
nodeExpand(data,node){
let _this = this;
if(!node.checked&&!node.indeterminate){//解决el-tree组件的bug
setTimeout(()=>{
for(let i in node.childNodes){
if(_this.defaultCheckedKeys.indexOf(node.childNodes[i].data.value) == -1){
node.childNodes[i].checked = false
}else {
node.childNodes[i].checked = true;
node.indeterminate = true
}
}
},100)
}
},
在节点对应的 Node上找到子级并分别遍历,利用checked属性重新设置正确的选中状态。虽然不是很优雅但也是一种解决办法吧。注意还要有个100ms延迟,因为数据是在懒加载之后才能拿到的,不然这样修改也是没效果的。
网友评论