Bootstrap

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

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:配置选项,具体看下图。配置数据库字段名与这几个属性一致
在这里插入图片描述
而根据后台的返回,针对: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

;