antd Tree父节点半选中问题

问题来源：
在做角色授权功能时，使用antdesign Vue3 里面的Tree组件写授权树，前端选择子级节点，父节点半选中状态，调用接口时没有传递父节点信息，导致用户获取菜单权限时没有父级菜单，所以父级节点半选中时需要传递到后端，但传递到后端后出现回显问题。因为返回接口有父级节点，再加上时层级关联的方式，导致父级节点下所有子节点都选中，所以需要解决该问题。

Ant Design Vue3文档

解决方案：

1. 保存半选中父节点信息

在提供的check事件中，保存半选中的父级节点信息

/**
 * 点击选中
 */
function onCheck(keys: any, e: any) {
  halfcheck.value = keys.concat(e.halfCheckedKeys);
  checkedKeys.value = keys.checked ? keys.checked : keys;
  console.log("测试:" + checkedKeys.value)
}

所有选中的节点信息都保存到halfcheck变量中，提交的时候可以直接提交这个变量信息

然后前端把半选中的父节点传递到后端后，需解决回显问题。

2. 解决回显问题

在获取到后端数据后，对数据进行处理，只保留子级节点信息

let checkedIds = [] as any;
//设置回显的子节点
function setCheckedKeys(permResult: any) {
  console.log("进入设置半选:", permResult)
  permResult.forEach((v) => {
    let result = isChildNode(treeData.value, v)
    if (result) {
      checkedIds.push(v)
    }
  })
  console.log("checkedIds:", checkedIds)
  checkedKeys.value = checkedIds;
}
//判断是否是子级节点
function isChildNode(list, id) {
  for (let i = 0; i < list.length; i++) {
    const v = list[i];
    if (id == v.key) {
      return v.isLeaf
    } else if (v.children) {
      if (isChildNode(v.children, id)) {
        return true;
      }
    }
  }
  return false
}

把后台传递的数据获取到后，直接调用setCheckedKeys方法，把数据传递进去即可。这边的后端数据是数组类型，如是其他格式，可自行调整
后端返回数据格式：[“1”,“2”,“3”]

//设置子节点数据
setCheckedKeys(permResult)

这样就实现了后端传递有子、父节点数据，前端根据子节点数据层级关联显示父节点按钮选中状态。