element-ui树形组件实现父级与子级关联，子级与父级不关联

需求：使用elementui在开发权限树，系统组织树时，会遇到勾选父级时，子级全选，勾选子级时父级不会被勾选（elementui正常情况下会发生后端回传ID数组中只要有父级ID，那么子级所有项都会被勾选）

使用属性check-strictly

官方文档提供属性check-strictly，在显示复选框的情况下，是否严格的遵循父子不互相关联的做法，默认为 false。
而此属性的意思是：
默认false，父子关联。有如下现象及问题：
1、当你通过函数设置勾选节点的时候，只要父节点被勾选子节点必会勾选上，即便设置勾选的list中无此子节点。
2、当你点击勾选复选框时候，若点击父节点，其下子节点全部统一跟随父节点变化；若点击子节点，子节点部分勾选时父节点处于半选状态，子节点全部勾选时父节点选中，子节点全部不勾选时父节点未选中。
设置true，严格的遵循父子不互相关联。
1、当你通过函数设置勾选节点的时候，严格通过设置勾选的list中有无此节点来断定是否勾选。
2、当你点击勾选复选框时候，无论点击的哪个节点只会改变当前节点的勾选状态，不存在半选状态。

解决办法

一、首先将树设置严格模式check-strictly=true。
二、使用@check方法进行覆写勾选功能。

<div class="treeBox-tree">
    <el-tree
        :data="orgList"
        show-checkbox
        node-key="id"
        ref="orgTree"
        :default-checked-keys="
            ruleForm.addOrgIds
        "
        check-strictly
        @check="orgCheck"
        @check-change="changeOrg"
        :default-expand-all="true"
        :check-on-click-node="true"
        :filter-node-method="
            filterOrgNode
        "
        :props="defaultProps"
    >
    </el-tree>
</div>

orgCheck(data,node) {//系统权限树操作（多个树同时存在可用名称区别）
  this.hanleCheck(data,node,'orgTree');
},
hanleCheck(data,node,treeName){
  const _this = this
  // 获取当前节点是否被选中
  const isChecked = this.$refs[treeName].getNode(data).checked
  // 如果当前节点被选中，则遍历下级子节点并选中，如果当前节点取消选中，则遍历下级节点并取消选中
  if(isChecked){
    // 判断是否有上级节点，如果有那么遍历设置上级节点选中
    // if(data.parentId||data.parentId===0){
    //   setParentChecked(data.parentId)
    // }
    // 判断该节点是否有下级节点，如果有那么遍历设置下级节点为选中
    data.childrenList && data.childrenList.length>0 && setChildreChecked(data.childrenList,true)
  }else{
    // 如果节点取消选中，则取消该节点下的子节点选中
    data.childrenList && data.childrenList.length>0 && setChildreChecked(data.childrenList,false)
  }
  function setParentChecked(parenId){
    console.log(parentId)
    // 获取该id的父级node
    const parentNode = _this.$refs[treeName].getNode(parentId)
    // 如果该id的父级node存在父级id则继续遍历
    parentNode.data.parentId && setParentChecked(setParentChecked)
    //  设置该id的节点为选中状态
    _this.$refs[treeName].setChecked(parenId,true)
  }
  function setChildreChecked(node,isChecked){
    node.forEach(item => {
      data.childrenList && item.childrenList.length>0 && setChildreChecked(item.childrenList,isChecked)
      _this.$refs[treeName].setChecked(item.id,isChecked)
    })
  }

}

标签：父级,childrenList,关联,勾选,选中,子级,data,节点
来源： https://blog.csdn.net/lichaoqun678/article/details/121166732