效果图:
数据源
const data = [{"categoryidf": "761525000288210944","categoryids": "766314364226637824","menunamef": "经济运行","menunames": "经济运行总览","tempname": "南沙区XXXX年XX季度经济运行情况及存在问题","tempid": "787314277060055040","show_orderf": 2,"show_orderss": 1},{"categoryidf": "761525000288210944","categoryids": "766314364226637824","menunamef": "经济运行","menunames": "经济运行总览","tempname": "报告模板","tempid": "805483785230618624","show_orderf": 2,"show_orderss": 1},{"categoryidf": "761525000288210944","categoryids": "766314364226637824","menunamef": "经济运行","menunames": "经济运行总览","tempname": "南沙区经济运行分析报告-开发中勿删","tempid": "766692223369744384","show_orderf": 2,"show_orderss": 1},{"categoryidf": "761560904969097216","categoryids": "787329448503545856","menunamef": "宏观经济","menunames": "地区生产总值","tempname": null,"tempid": null,"show_orderf": 3,"show_orderss": 1},{"categoryidf": "761560904969097216","categoryids": "787329962872016896","menunamef": "宏观经济","menunames": "行业总览","tempname": null,"tempid": null,"show_orderf": 3,"show_orderss": 2},{"categoryidf": "761560904969097216","categoryids": "787330410567831552","menunamef": "宏观经济","menunames": "工业","tempname": null,"tempid": null,"show_orderf": 3,"show_orderss": 3},{"categoryidf": "761560904969097216","categoryids": "787330779163267072","menunamef": "宏观经济","menunames": "商贸业","tempname": null,"tempid": null,"show_orderf": 3,"show_orderss": 4},{"categoryidf": "761560904969097216","categoryids": "787331288074948608","menunamef": "宏观经济","menunames": "服务业","tempname": null,"tempid": null,"show_orderf": 3,"show_orderss": 5},{"categoryidf": "761560904969097216","categoryids": "787331500218650624","menunamef": "宏观经济","menunames": "房地产开发业","tempname": null,"tempid": null,"show_orderf": 3,"show_orderss": 6},{"categoryidf": "761560904969097216","categoryids": "787331766636646400","menunamef": "宏观经济","menunames": "建筑业","tempname": null,"tempid": null,"show_orderf": 3,"show_orderss": 7},{"categoryidf": "761560904969097216","categoryids": "787332016487141376","menunamef": "宏观经济","menunames": "进出口","tempname": null,"tempid": null,"show_orderf": 3,"show_orderss": 8},{"categoryidf": "761560904969097216","categoryids": "787332232145670144","menunamef": "宏观经济","menunames": "固定资产投资","tempname": null,"tempid": null,"show_orderf": 3,"show_orderss": 9},{"categoryidf": "761560904969097216","categoryids": "787332439809855488","menunamef": "宏观经济","menunames": "派生产业","tempname": null,"tempid": null,"show_orderf": 3,"show_orderss": 10},{"categoryidf": "767696419078410240","categoryids": null,"menunamef": "营商环境","menunames": null,"tempname": null,"tempid": null,"show_orderf": 4,"show_orderss": 0},{"categoryidf": "763705116242087936","categoryids": null,"menunamef": "数字经济","menunames": null,"tempname": null,"tempid": null,"show_orderf": 5,"show_orderss": 0},{"categoryidf": "763705094125522944","categoryids": "787332966232756224","menunamef": "产业经济","menunames": "产业总览","tempname": null,"tempid": null,"show_orderf": 5,"show_orderss": 1},{"categoryidf": "763705094125522944","categoryids": "807545774656327680","menunamef": "产业经济","menunames": "产业链图谱","tempname": "系列产业研究报告标准版本","tempid": "807546080970543104","show_orderf": 5,"show_orderss": 2},{"categoryidf": "763705094125522944","categoryids": "787333327861452800","menunamef": "产业经济","menunames": "人才和创新资源","tempname": null,"tempid": null,"show_orderf": 5,"show_orderss": 3},{"categoryidf": "767696724260163584","categoryids": null,"menunamef": "企业发展","menunames": null,"tempname": null,"tempid": null,"show_orderf": 6,"show_orderss": 0},{"categoryidf": "767696857580310528","categoryids": "777906003562860544","menunamef": "智慧招商","menunames": "演示","tempname": "南沙区经济运行分析报告-演示使用勿删","tempid": "777906168692609024","show_orderf": 7,"show_orderss": 2},{"categoryidf": "786523422359425024","categoryids": null,"menunamef": "经济韧性评估","menunames": null,"tempname": null,"tempid": null,"show_orderf": 8,"show_orderss": 0}]
转换为树目录结构
// 定义一个函数来构建层级结构
function buildHierarchy(data: any[]): any[]{const hierarchy: any[] = [];const map = new Map<string, any>();console.log('map',map);// 遍历数据,构建 mapdata.forEach(item => {if (!map.has(item.menunamef)) {map.set(item.menunamef, {key:item.categoryidf,label: item.menunamef,children: []});hierarchy.push(map.get(item.menunamef));}if (item.menunames) {const parent = map.get(item.menunamef);if (!parent.children.find(child => child.label === item.menunames)) {parent.children.push({key:item.categoryids,label: item.menunames,children: []});}}if (item.tempname) {const parent = map.get(item.menunamef);const subParent = parent.children.find(child => child.label === item.menunames);if (subParent) {subParent.children.push({label: item.tempname,key: item.tempid});} else {parent.children.push({label: item.tempname,key: item.tempid});}}});return hierarchy;
}const result = buildHierarchy(data);