解决 antdesign vue的树组件选中子节点父节点自动选中后所有子节点选中问题

1.问题出处

        在之前项目中遇到一个问题,具体业务场景是,后台管理系统中的权限管理中的角色管理,选择角色所携带权限的需求,很常见也很简单的需求;

        但是在开发过程中遇到了一个问题, antdesign vue组件库的树组件,当我只选择某个目录权限下的某几个菜单权限或者菜单权限下的某几个按钮权限时,再次回显的时候,因为子节点选择了,对应的父节点也会自动勾选,然后会自动勾选所有的子节点,虽然被选中的权限没有变,但是会展示所有都勾选了;

        我看网上的解决方法都是,关闭tree组件的父子关联,拿到所有的节点,再拿到当前拥有的节点,在选中子节点后,再逐级向上找他的父节点,然后使用js进行关联,大概是这么个意思,很复杂,我看的头都大了,然后我就决定自己找个方法解决这个问题;

2:解决问题

const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
  await resetFields()
  menuReset()
  setModalProps({ confirmLoading: false })
  // 这个是用来组树的
  if (unref(treeData).length == 0) {
    // 查询角色所拥有的所有的资源
    const res = await getMenuList({})
    // 调用 handleTree 方法对菜单数据进行处理，生成树状数据
    treeData.value = handleTree(res)
    // 创建一个包含所有父节点的 id 的集合
    parentIds.value = new Set(res.map((item) => item.parentId))
  }
  // 获取角色详情
  const res = await getRole(data.record.id)
  // 查询角色拥有的菜单权限的id
  const menuIds = await listRoleMenus(data.record.id)
  // 筛选出不属于父节点的id(所有的子节点id)
  const excludeParentIds = menuIds.filter((item: any) => !parentIds.value.has(item))
  // 给menuKeys赋值
  menuKeys.value = menuIds
  // 将所有子节点的id赋值
  res.menuIds = excludeParentIds
  // 使用 setFieldsValue 方法将 res 的属性值设置为表单字段的值
  await setFieldsValue({ ...res })
})

首先请原谅我的any,哈哈哈,我使用的是vben的中后台的模板,问题的解决思路已经备注写好了,大概思路就是这样,就是拿到所有的子节点,去设置,很简单的解决了问题;