关于ElTree组件设置default-checked-keys属性不生效的问题
问题描述
我们通常会用ElTree
组件来展示树形结构数据,有时候会在展示的时候默认展示一些勾选的项,但是在有些情况下设置了default-checked-keys
属性但是不起作用
问题说明
checked渲染逻辑说明
ElTree
组件仅会在第一次创建的时候比对data中指定的key是否存在于default-checked-keys
属性数组中,如果存在则渲染为选中状态,没有则不渲染
我们的实际情况
我们实际会存在以下几种情况导致在初始化时渲染失败
ElTree
的数据是动态获取的数据,而我们第一次将数据初始化为了[],那么此时ElTree
开始渲染,由于没有数据所以渲染失败。更新数据后ElTree
重新渲染,但是checked状态不会重新渲染ElTree
数据初始化时,default-checked-keys
还没有准备好,导致渲染checked失败,后续default-checked-keys
再更新也不会触发重新渲染
解决方法
- 保证
default-checked-keys
数据比ElTree
的数据提前设置完毕 - 保证
ElTree
第一次初始化的数据为有效数据,避免出现空数组的情况,因为空数组也会触发ElTree
的初始化过程- 可以将
ElTree
的数据设置为null,等有效数据加载后再进行赋值
- 可以将
如果以上两点无法保证,那么则需要在合适的时机通过手动调用ElTree
的setCheckedKeys方法来进行触发