element-ui el-tree 子节点全不选时，设置父节点半选状态

野性酷女 2023-03-13 13:57 21阅读 0赞

### el-tree要点 ###

> el-tree 详细请看[官方文档][Link 1]，这里只简要介绍涉及到的部分要点

*  check-strictly  
    是否严格父子不互相关联  
    true: 父子不级联即选中节点仅对当前节点操作  
    false:父子级联（默认）即选中父节点其子节点全部选中，选中部分子节点父节点半选中，选中全部子节点父节点完全选中
 *  getCheckedKeys()  
    获取选中的node的key值 (完全选中状态)
 *  setCheckedKeys()  
    对应getCheckedKeys（）
 *  getHalfCheckedKeys()  
    获取半选中的node的key值（半选中状态）  
    没有提供直接可用的set方法
 *  node.isLeaf  
    是否叶子节点
 *  node.checked  
    是否完全选中
 *  node.indeterminate  
    是否半选中

### 业务场景 ###

1.  菜单管理  
    ![在这里插入图片描述][2020051414424915.png]
2.  角色管理  
    ![在这里插入图片描述][2020051414413391.png]

> 1.  进行菜单分配时，保存节点的key值为所有节点的key（包括完全选中和半选中节点）

> 1.  查看已分配的节点时，从后台获取数据对树进行回填

> 1.  角色分配菜单完成后，菜单管理中可能会继续增、删操作

### 问题与解决方案 ###

> 获取所有节点（包括完全选中和半选中节点）

*  getCheckedKeys()  
    获取选中的node的key值 (完全选中状态)
 *  getHalfCheckedKeys()  
    获取半选中的node的key值（半选中状态）

> 后台获取所有节点key直接进行 setCheckedKeys(data)时，父节点设置选中会将所有其子节点设置选中

el-tree 的 check-strictly 为 false

// data 为后台获取到的 key 数组
    // 遍历data，筛选子节点
    let checkTreeNode = []
    for (let item of data) { 
        let node = this.$refs.tree.getNode(item)
        if (node && node.isLeaf) { 
             checkTreeNode.push(item)
        }
    }
    // 设置所有子节点选中，自动回填父节点
    this.$refs.tree.setCheckedKeys(checkTreeNode)

> 角色分配菜单完成后，菜单管理将某父节点下的子节点全部删除，数据库中仅删除对应的子节点，而父节点没有删除，此时后台数据回填树会导致该父节点没有选中状态。

// data 为后台获取到的 key 数组
    // 遍历data，筛选子节点和父节点
    let checkTreeNode = []
    let parentNodes = []
    for (let item of data) { 
        let node = this.$refs.tree.getNode(item)
        if (node && node.isLeaf) { 
             checkTreeNode.push(item)
        } else if (node) { 
    		parentNodes.push(node)
    	}
    }
    // 设置所有子节点选中，自动回填父节点
    this.$refs.tree.setCheckedKeys(checkTreeNode) 
    // 未回填的父节点单独设置
    for (let node of parentNodes) { 
        do { 
        	//应当有状态的父节点在未选中时设置为半选中状态 
            if (!node.checked && !node.indeterminate) { 
                node.indeterminate = true
            }
            // node.indeterminate = true 仅对一个节点进行半选中状态设置，其父节点不能自动级联设置，所以这里循环设置级联父节点状态
            node = node.parent
        } while (node)
    }

[Link 1]: https://element.eleme.cn/#/zh-CN/component/tree
[2020051414424915.png]: /images/20230312/3e64905fb5d844c195673cb34d7ad629.png
[2020051414413391.png]: /images/20230312/a9bd73debcec4fdbb846e24590e4217e.png