问题描述:使用懒加载方式渲染,一个树节点下有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方法中设置选中的节点。