vue el-tree的展示和节点默认勾选，以及踩的坑

一、目标：点击按钮，获取tree，并且勾选相应的节点。

二、实现：

1、写一个树

<el-tree
   :data="treeData"
   default-expand-all
   show-checkbox
   node-key="id"
   ref="tree"
   @current-change="handleCheckChange"
   @check="handleCheckChange"
   :default-checked-keys="checkedRole"
   :props="defaultProps">
 </el-tree>

2、调用接口获得权限树

getSysAllRight(){
       //获取权限树
      getSysRightTree({sysAppId: this.sysAppId}).then(res=>{
        if(!res) return
        this.treeData = res.content.list
      })
    },

3、调用接口获取权限Id列表，并给权限树打勾

handleEdit(row) {
      //获取权限
      getSysRoleModelAndRight({id: row.id}).then(res=>{
        if(!res) return
        this.checkedRole = res.content.sysRoleRights //存放数据库已有的权限
        this.selectedNodes = [...this.checkedRole] //存放选择项
        this.$refs.tree.setCheckedKeys(this.checkedRole);//进行勾选
      })
    },

4、新勾选以后的节点保存

handleCheckChange(nodeData, checkedData) {
   this.selectedNodes = this.$refs.tree.getCheckedNodes()
},

三、坑：

基本实现不难，但是后来发现，这里有个坑。

上面的实现，selectedNodes的获取是这样的：只要勾选了全部的子节点，那么parent节点的Id也会被自动勾选获取。

这个完全没有问题！问题是，如果勾选了子节点，parent节点也被获取到存起来了。那么下次我对这个树做了修改，新增了一个子节点。这个时候，再次获取勾选项的时候，由于之前存了了parent节点Id，因此获取到新tree的时候，在展示上，新增的子节点也被默认勾选了！但实际上，我们并没有勾选这个子节点。

 

四、解决坑：

思路：获取到树以后判断一下，如果勾选了parent节点，需要判断treeData里面的children节点是否都勾选了，因为有可能新增了节点。如果新增了节点，那么parent节点需要取消勾选，所以要找到需要去掉的parent节点。因为涉及到多个子节点，所以这里需要用递归函数去遍历。代码如下：

   removeNofullChildParent(){
      this.parentCancelNode = [] //存放需要取消的parentNode
      //第一次treeData没有数据
      if(this.treeData.length!=0){
        for(let i = 0; i < this.treeData.length; i++){
          //得到没有被勾选的parentNode，即parentCancelNode
          this.checkParent(this.treeData[i].childRights, this.checkedRole, this.treeData[i].id);
        }
      } 
      //如果checkedRole中存在parentCancelNode的节点 删除
      for(let j = 0; j < this.parentCancelNode.length; j++){
        let index = this.checkedRole.findIndex(item => item == this.parentCancelNode[j])
        if(index!=-1){
          //如果匹配到 删除
          this.checkedRole.splice(index, 1)
        }
      }
    },
    checkParent(childrenData, checkedRole, parentNode){
      //如果子节点没有数据 返回
      if(childrenData.length == 0) return
      for(let i = 0; i < childrenData.length; i++){
        let index = 0;
        for(let j = 0; j < checkedRole.length; j++){
          this.checkParent(childrenData[i].childRights, checkedRole, childrenData[i].id)
          if(childrenData[i].id == checkedRole[j]){
            //如果id相等
            index++;
          }
          if(index == childrenData.length){
            //如果等于的次数 等于 说明没有添加
            return
          }else if(i == (childrenData.length-1) && j == (checkedRole.length-1) && index != (childrenData.length-1)){
            this.parentCancelNode.push(parentNode)
            return
          }
        }
      }
    },