Elementui tree树形控件 未全选保存时未提交父节点id和回显时子节点因父节点全选问题

一。树形控件半选选中状态如下图

当做权限分配时，使用getCheckedKeys可以获取当前选中的节点（不包含半选中状态节点）；

vue2写法 this.$refs.tree.getCheckedKeys(false);

vue3写法 tree.value.getCheckedKeys(false)

只有当子节点全选时才能获取到父节点，然而后端保存时需要父节点，怎么办呢？

解决方法：

vue3 写法：先使用getCheckedKeys()获取全选状态节点，在使用getHalfCheckedKeys()获取到半选状态节点然后使用数据合并concat()得到全选状态和半选状态节点数据

const selectedKeys = tree.value.getCheckedKeys(false)
const halfSelectKeys = tree.value.getHalfCheckedKeys(false)
const selectKeys = selectedKeys.concat(halfSelectKeys)

那么问题又出现了，当数据回显时，半选状态的父节点已存在回显数据中，会全部中子节点如下图

不要着急，解决办法如下：

vue3写法

1。首先清空树选中状态
treeRef.value.setCheckedKeys([])
2.遍历后端返回的的树的数组
selectedAllNodesId.forEach((i) => {
   3.根据返回值获取到当前树的节点所有信息
   const node = treeRef.value.getNode(i)
   4.node.isLeaf 判断当前节点是否为子节点
   if (node.isLeaf) {
     5.如果是子节点就把状态设置为选中状态
     treeRef.value.setChecked(node, true)
   }
})

treeRef.value.setCheckedKeys([])
selectedAllNodesId.forEach((i) => {
   const node = treeRef.value.getNode(i)
   if (node.isLeaf) {
     treeRef.value.setChecked(node, true)
   }
})