标签：父级 childrenList 关联 勾选 选中 子级 data 节点

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。