element ui 使用tree组件问题记录

使用tree组件 父级id返回、回显问题

• 第一步 当tree组件使用点击事件时，如果父级下面的子级没有全部选中 是不会返回当前所在的父级id

 <el-tree :props="props" ref="tree1" node-key="id" :data="RoleSelectList" @check="handleNodeClickTree1" show-checkbox>
 handleNodeClickTree1(node, data, value) {
       let _checkedKeys = data.checkedKeys//只有在子级全部选中的时候才会返回父级的id
       let id = this.$refs.tree1.getHalfCheckedKeys().concat(this.$refs.tree1.getCheckedKeys())
       //现在不管是子级有没有全选中都会返回父级的id
       console.log(id,_checkedKeys)
     
    },

• 第二步 解决了上一步你会发现回显的时候有问题，后台返回的数据中选有父节点id和子节点id就导致父节点直接全选

解决方法

edit(){
 this.$refs.tree1.setCheckedKeys([])//  先清空选中状态
  IdList.forEach(i => {
  // 根据id 拿到 Tree 组件中的node的所有信息
        let node = this.$refs.tree1.getNode(i);
        // node.isLeaf：判断当前节点是否为子节点
        if (node.isLeaf) {
   		  //如果是子节点，就把状态设置成选中
          this.$refs.tree1.setChecked(node, true);
        } else {

        }
  })
  }
  //IdList是设置选中的数据