vue element-ui tree树形控件中默认选中

方式一: 通过标签内属性: :default-checked-keys来设置

<el-tree
      :data="dataList"
      show-checkbox
      default-expand-all
      check-strictly
      :default-checked-keys="defaultList"//数组中是rightsList中有权限的id值
      :props="{label: 'name'}"
    />
    
  data() {
    return {
      dataList: [name:123,id:1,name:345,id:2],
      defaultList: [1,2]
    }
  }
复制代码

在使用element-ui中的tree控件时,我想要默认选中角色拥有权限的复选框时,发现即使设置了:default-checked-keys=”[…]”,也不能渲染结果,后来发现没有设置 node-key

<el-tree
      :data="dataList"
      show-checkbox
      default-expand-all
      check-strictly
      :default-checked-keys="defaultList"//数组中是rightsList中有权限的id值,与node-key对应
      node-key="id"
      :props="{label: 'name'}"
    />
    
  data() {
    return {
      dataList: [name:123,id:1,name:345,id:2],
      defaultList: [1,2]
    }
  }
复制代码

方式二: 通过 this.$refs.tree组件上自定义ref名.setCheckedKeys(this.defaultList)

<el-tree
  ref="tree"
  :data="dataList"
  show-checkbox
  default-expand-all
  check-strictly
  :default-checked-keys="defaultList"//数组中是rightsList中有权限的id值,与node-key对应
  node-key="id" // 通过此方式必须设置该项
  :props="{label: 'name'}"
/>
data() {
    return {
      dataList: [name:123,id:1,name:345,id:2],
      defaultList: [1,2]
    }
},
created(){
    1.this.$refs.tree.setCheckedKeys(this.defaultList) 
    // 如果发现还是没有渲染,可能是dom树渲染的问题,通过this.$nextTick(() => {})解决
    2.this.$nextTick(() => {
        this.$refs.tree.setCheckedKeys(this.defaultList)
    })

}
复制代码

获取被选中节点 通过: this.$refs.tree.getCheckedKeys()

console.log(this.$refs.tree.getCheckedKeys())
// 得到一个数组,数组中是与node-key="id"对应的id值
// [1,2]
复制代码