0
点赞
收藏
分享

微信扫一扫

elementui tree遇到的坑,default-checked-keys懒加载后出现全选的情况, 已解决

新鲜小饼干 2022-03-24 阅读 11
elementui

问题描述:使用懒加载方式渲染,一个树节点下有5个节点,设置 default-checked-keys默认选中n(1<n<5)个子节点,出现子节点全部被选中的情况。

问题分析:使用懒加载方式选中子节点,tree在渲染的过程中是异步的,tree在判断所有子节点是否选中的过程中,计算得出所有的子节点全部选中,导致父节点被选中,父节点选中其下的所有子节点全部被选中。

解决问题思路:

解决方式一:check-strictly - 在显示复选框的情况下,是否严格的遵循父子不互相关联的做法,默认为 false。缺点:父节点和子节点不关联。 我的业务是不需要选中父节点,故采用这个方案。

代码:

亲测有效截图: 

解决方式二:load加载完成tree渲染完成后$nextTick方法中使用tree提供的方法进行设置选中的节点。

setCheckedKeys通过 keys 设置目前勾选的节点,使用此方法必须设置 node-key 属性(keys, leafOnly) 接收两个参数,1. 勾选节点的 key 的数组 2. boolean 类型的参数,若为 true 则仅设置叶子节点的选中状态,默认值为 false
setChecked通过 key / data 设置某个节点的勾选状态,使用此方法必须设置 node-key 属性(key/data, checked, deep) 接收三个参数,1. 勾选节点的 key 或者 data 2. boolean 类型,节点是否选中 3. boolean 类型,是否设置子节点 ,默认为 false

缺陷:需要在每次load方法中设置选中的节点。

举报

相关推荐

0 条评论