关于ElTree组件设置default-checked-keys属性不生效的问题

By | 2023年8月31日

关于ElTree组件设置default-checked-keys属性不生效的问题

问题描述

我们通常会用ElTree组件来展示树形结构数据,有时候会在展示的时候默认展示一些勾选的项,但是在有些情况下设置了default-checked-keys属性但是不起作用

问题说明

checked渲染逻辑说明

ElTree组件仅会在第一次创建的时候比对data中指定的key是否存在于default-checked-keys属性数组中,如果存在则渲染为选中状态,没有则不渲染

我们的实际情况

我们实际会存在以下几种情况导致在初始化时渲染失败

  1. ElTree的数据是动态获取的数据,而我们第一次将数据初始化为了[],那么此时ElTree开始渲染,由于没有数据所以渲染失败。更新数据后ElTree重新渲染,但是checked状态不会重新渲染
  2. ElTree数据初始化时,default-checked-keys还没有准备好,导致渲染checked失败,后续default-checked-keys再更新也不会触发重新渲染

解决方法

  1. 保证default-checked-keys数据比ElTree的数据提前设置完毕
  2. 保证ElTree第一次初始化的数据为有效数据,避免出现空数组的情况,因为空数组也会触发ElTree的初始化过程
    1. 可以将ElTree的数据设置为null,等有效数据加载后再进行赋值

如果以上两点无法保证,那么则需要在合适的时机通过手动调用ElTree的setCheckedKeys方法来进行触发