element ui的el-tree多选树(复选框)父子节点关联不关联的问题，选中当前节点，他的子节点和父节点是否被选中，非常详细

秒速五厘米 2021-09-13 16:40 1095阅读 0赞

## element ui的el-tree多选树(复选框)父子节点关联不关联的问题，选中当前节点，他的子节点和父节点是否被选中，非常详细 ##

## 属性check-strictly ##

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

**设置true，严格的遵循父子不互相关联。**  
1、当你通过函数设置勾选节点的时候，严格通过设置勾选的list中有无此节点来断定是否勾选。  
2、当你点击勾选复选框时候，无论点击的哪个节点只会改变当前节点的勾选状态，不存在半选状态。

**系统的角色菜单控制的问题**  
问题来了，在系统的角色菜单控制的时候，需要满足以下条件：  
1、当通过函数设置勾选节点的时候，需要严格通过设置勾选的list中有无此节点来断定是否勾选，即勾选父节点而不一定勾选全部子节点。  
2、当点击勾选复选框时候，若点击父节点，其下子节点全部统一跟随父节点变化。  
3、当点击勾选复选框时候，若点击子节点，子节点部分勾选时父节点处于半选状态，子节点全部勾选时父节点选中，子节点全部不勾选时父节点未选中。

**1.要求父子之间严格不关联，选中当前节点，他的所有子节点都被选中  
2.要求父子之间严格不关联，选中当前节点，他的所有父节点和子节点都被选中**

## 需求思考： ##

**一、check-strictly=false，行不通**  
按照需要满足的条件，明显靠近将check-strictly设置为false，于是从check-strictly=false父子互相关联的基础入手，需要解决的问题就是：  
将尚未全部勾选的子节点对应的父节点改为半勾选状态，但是查找文档良久无果。  
只有getHalfCheckedKeys和getHalfCheckedNodes，并没有设置成半勾选。

**二、check-strictly=true，试一试**  
只能试一下将check-strictly设置为true，从check-strictly=true严格的遵循父子不互相关联入手，需要解决的问题就是：  
1、当点击勾选复选框时候，若点击父节点，其下子节点全部统一跟随父节点变化。  
2、当点击勾选复选框时候，若点击子节点，子节点部分勾选时父节点处于半选状态，子节点全部勾选时父节点选中，子节点全部不勾选时父节点未选中。  
而在严格的父子不互相关联时，点击父子节点不会出现半选状态，也无法通过函数设置半选状态，无奈简化解决问题：  
1、当点击勾选复选框时候，若状态为 选中 ：  
1.1、其所有 父节点 （父节点、父节点的父节点以此类推）全部统一跟随当前节点变化为 选中 。  
1.2、其下 子节点 全部统一跟随父节点变化为 选中 。  
2、当点击勾选复选框时候，若状态为 未选中 ，其下 子节点 全部统一跟随父节点变化为 未选中 。

## 解决代码： ##

## 1、el-tree标签属性 ##

<el-tree 
    			 ref="tree"
    			  :data="data"
    			   :props="defaultProps" 
    			   :show-checkbox="true"
    			    node-key="id" 
    			    highlight-current 
    			    :expand-on-click-node="false"
    			    :default-checked-keys="checkedId" 
    			    :check-strictly="true" 
    			    @check="nodeClick">
        </el-tree>

**：data,是你要展示的数据**  
**node-key**：每个树节点用来作为唯一标识的属性，整棵树应该是唯一的。标识节点唯一的键值名称。  
**default-checked-keys = checkedId**：对应el-tree多选树组件初始化时默认选中ID  
**check-strictly = true**：是否严格的遵循父子不互相关联的做法  
**check**：当复选框被点击的时候触发的方法  
**props**：配置选项，具体看下图。配置数据库字段名与这几个属性一致  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bnJqX25pdQ_size_16_color_FFFFFF_t_70]  
而根据后台的返回，针对:props=“defaultProps”，我的配置为：

defaultProps: {
      children: 'children',
      label: 'categoryName'
      disabled: this.isDisabled
    }

其他属性：

data() {
          return {
            data: [],
            checkedId:"",
            defaultProps: {
              children: 'children',
              label: 'categoryName'
            },
          };
        },

## 2、el-tree组件有变化时给多选树重新赋值 ##

updated () {
     // 给多选树设置默认值
      this.$refs.tree.setCheckedKeys(this.checkedId)
    },

**checkedId为勾选节点的数组，不区分父子节点。**

## 3、重点:复选框点击时的特殊处理 ##

nodeClick (currentObj, treeStatus) {
            console.log(currentObj)
            console.log("=========")
            console.log(treeStatus)
            // 用于：父子节点严格互不关联时，父节点勾选变化时通知子节点同步变化，实现单向关联。
            let selected = treeStatus.checkedKeys.indexOf(currentObj.id) // -1未选中,>=0为选中
    
            console.log(selected)
            // 选中
            if (selected !== -1) {
                 // 子节点只要被选中父节点就被选中(需要选中父节点时候调用此方法)
                 //this.selectedParent(currentObj)
                 // 统一处理子节点为相同的勾选状态
                 this.uniteChildSame(currentObj, true)
            } else {
                 // 未选中 处理子节点全部未选中
                 if (currentObj.children.length !== 0) {
                   this.uniteChildSame(currentObj, false)
                 }
            }
          },
    
        // 统一处理子节点为相同的勾选状态
          uniteChildSame (treeList, isSelected) {
            console.log("aaaaaaaaaaaaa")
            console.log(treeList);
          this.$refs.tree.setChecked(treeList.id, isSelected)
          for (let i = 0; i < treeList.children.length; i++) {
            this.uniteChildSame(treeList.children[i], isSelected)
          }
        },
        // 统一处理父节点为选中
        selectedParent (currentObj) {
          let currentNode = this.$refs.tree.getNode(currentObj)
          if (currentNode.parent.key !== undefined) {
            this.$refs.tree.setChecked(currentNode.parent, true)
            this.selectedParent(currentNode.parent)
          }
        },

原文链接：https://blog.csdn.net/Beam007/article/details/87858291

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bnJqX25pdQ_size_16_color_FFFFFF_t_70]: /images/20210913/ec16046ede204aecade8fb24c78142f5.png