element-ui的树状图default-checked-keys默认却勾选了所有的子节点

在开发的过程中,有一个权限模块的需求,是需要更新分配的权限,因此需要在编辑的时候,将之前已有的权限默认先勾选上。
element-ui的树状图default-checked-keys默认却勾选了所有的子节点_第1张图片
页面是这样的,树状图是懒加载的。
但是开发完成之后测试的时候,发现了很玄学的问题:
每次只要勾选前两个,比如勾选oss下的wb_test3和A,再次点开编辑的时候,就变成了oss下的子节点是全选的了。
bug复现:
element-ui的树状图default-checked-keys默认却勾选了所有的子节点_第2张图片element-ui的树状图default-checked-keys默认却勾选了所有的子节点_第3张图片
我打印看了一下默认赋给树状图选中的default-checked-keys的数组,发现没有问题,是两个id,但是为什么其他的都被选中了呢,太玄学了!
后来研究了很久,我尝试打印了一个值:this.$refs.tree.getCheckedKeys()
发现了问题所在:
给大家看下打印结果:
在这里插入图片描述
在这里插入图片描述
getCheckedKeys()表示现在选中的节点中oss是被选中的,为什么会这样呢,我查询资料了解到,因为oss下是有子节点被选中的,因此,oss是半选的状态,因此通过getCheckedKeys()就会拿到oss是被选择的,所以出现了全选的情况。
重点来了:解决方案,其实出现半选的原因是因为父子节点是关联的,只需要父子节点不关联,根据节点id默认赋值选中就可以了。
element-ui的官方属性里有一个
在这里插入图片描述
加上这一行就可以了,没错,就是这么简单的解决办法,却让我卡了好几个小时排查问题在哪里,分享出来,希望大家少走弯路。
完整的代码


你可能感兴趣的:(element-ui)