情景:我们拿到的数据类型为:interface MenuManage {
/**
* 上级菜单名称
*/
PreviousMenu: string;
/**
* 菜单名称
*/
MenuName: string;
…
},即为此类型的数组。
我们的目标是将其转换为具有
label
value
children的树节点类型数据。
思路:
采用两次循环遍历。第一次遍历,先整理出所有获取的数据节点,因为PreviousMenu中存的是上级菜单名称,所以我们应该创建一个名称-节点的映射表。
第二次遍历,我们判断每个节点是否存在PreviousMenu,如果存在,则去映射表中找到它的父级,将它添加进它父级的children属性中,如果不存在,则该节点为根节点。
完整代码如下:
export function createTreeDataFromMenuManageInfoList(
menuManageData: MenuManage[],
): TreeNodeData[] {
if (!menuManageData || !Array.isArray(menuManageData)) {
return [];
}
const nodeMap = new Map<string, TreeNodeData>();
const rootNodes: TreeNodeData[] = [];
menuManageData.forEach((menu) => {
const node: TreeNodeData = {
label: menu.MenuName,
value: menu.Id || menu.MenuName,
...menu,
};
node.children = [];
nodeMap.set(menu.MenuName, node);
});
menuManageData.forEach((menu) => {
const currentNode = nodeMap.get(menu.MenuName);
if (!currentNode) return;
const parentMenuName = menu.PreviousMenu;
if (parentMenuName) {
const parentNode = nodeMap.get(parentMenuName);
if (parentNode) {
parentNode.children?.push(currentNode);
} else {
rootNodes.push(currentNode);
}
} else {
rootNodes.push(currentNode);
}
});
return rootNodes;
}
JS构建菜单树结构方法

被折叠的 条评论
为什么被折叠?



