问题说明
- 问题1:当子节点没有全部选择时,父节点不会被选中,而我们需要选中的子节点的父节点值也要返回给后端。
- 问题2:若checkedKeys里面有父节点,它会默认选择父节点下的所有子节点,展示会出问题,若直接把父节点给checkedKeys,点击此下的子节点将无法取消选中。
研发思路
- onCheck e.halfCheckedKeys是可以知道未被选中的所有父节点,可以保存在allMenuId中,而选中节点可以保存在menuId中。
- 编辑时,把allMenuId的数据处理一下,处理掉没有全选中子节点的父节点后,再保存给menuId中。
- 提交给后端的数据就用allMenuId。
相关操作
type MenuListItem = {
id:string;
pid:string;
children:MenuListItem[]|null;
}
const [menuData, setMenuData] = useState<MenuListItem[]>([]) // 树结构数据
const [menuId, setMenuId] = useState<React.Key[]>([]); // 选中数据
const [allMenuId, setAllMenuId] = useState<React.Key[]>([]); // 最终需要的选中数据
// 获取树结构数据
useEffect(() => {
const getMuneList = async () => {
const { data, success } = await handelList(menuList)
if (success) {
setMenuData(data)
} else {
setMenuData([])
}
}
getMuneList()
}, [])
// 函数来检查一个节点及其所有子节点是否都不被选中的方法
function areAllChildrenUnselected(node: API.MenuListItem, ids: string[]): boolean {
if (node.children) {
if (node.children.some(child => !ids.includes(child.id))) {
return false;
}
return node.children.every(child =>areAllChildrenUnselected(child, ids));
}
return true;
}
// 函数来过滤ids数组的方法
function filterIds(tree: API.MenuListItem[], ids: string[]) {
const filteredIdsSet = new Set(ids);
function traverse(node: API.MenuListItem) {
if (filteredIdsSet.has(node.id) && !areAllChildrenUnselected(node, ids)) {
filteredIdsSet.delete(node.id);
}
if (node.children) {
node.children.forEach(child => traverse(child));
}
}
tree.forEach(node => traverse(node));
return Array.from(filteredIdsSet);
}
// 处理掉没有全选中子节点的父节点 currentRow来自后端返回的已选中的节点数据 string[]
useEffect(() => {
if (currentRow) {
setAllMenuId(currentRow)
if (menuId.length === 0) {
if (menuData.length > 0) {
const data = filterIds(menuData, currentRow)
setMenuId(data)
} else {
setMenuId([])
}
}
}
}, [currentRow, menuData])
// 选择操作
const onCheck: TreeProps['onCheck'] = (data: any, e) => {
const halfData = e.halfCheckedKeys ? [...e.halfCheckedKeys] : []
const newData = [...data, ...halfData]
setMenuId(data)
setAllMenuId(newData)
}
组件使用
import { Tree } from "antd";
import type { TreeProps } from 'antd';
import { useEffect, useState } from 'react';
const TreeNode = Tree.TreeNode
// --------------------------------------------------------------------
const genTree = (tree: API.MenuListItem[]) => {
return tree.map(res => {
return <TreeNode
title={res.name}
key={res.id}
value={res.id}
>
{res.children && genTree(res.children)}
</TreeNode>
})
}
return (
<>
{menuData.length > 0 ? <Tree
blockNode
checkable
checkedKeys={menuId}
onCheck={onCheck}
>
{genTree(menuData)}
</Tree> : null
}
</>
)