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

el-tree要点

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

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

业务场景

1. 菜单管理
   

2. 角色管理
   

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

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

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

问题与解决方案

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

• 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)
}