前端将传回的List数据组织成树形数据并展示

前端将List传回的数据组织成树形数据并展示

系列文章指路👉
系列文章-基于Vue3创建前端项目并引入、配置常用的库和工具类

List数据示例

let dataArray = [{rootNode: true, parentId: null, id: '001', title: '父目录'},{rootNode: false, parentId: '001', id: '0011', title: '子目录1'},{rootNode: false, parentId: '0011', id: '0011-001', title: '孙目录1'},{rootNode: false, parentId: '0011-001', id: '0011-001-01', title: 'testName01'},{rootNode: false, parentId: '0011-001', id: '0011-001-02', title: 'testName02'},{rootNode: false, parentId: '0011', id: '0011-002', title: '孙目录2'},{rootNode: false, parentId: '0011', id: '0011-003', title: '孙目录3'},{rootNode: false, parentId: '001', id: '0012', title: '子目录2'},{rootNode: false, parentId: '001', id: '0013', title: '子目录3'},
]

组织数据

let treeData = buildTree(dataArray)
function buildTree(dataArray) {// 1. 创建ID到节点的映射（同时初始化children数组）const nodeMap = new Map();dataArray.forEach(dataObject => {nodeMap.set(dataObject.id,{parentId: dataObject.parentId,id: dataObject.id,rootNode: dataObject.rootNode,title: dataObject.title,children: []});});// 2. 构建树形结构const tree = [];for (const node of nodeMap.values()) {if (!node.rootNode) {// 查找父节点const parent = nodeMap.get(node.parentId);// 如果找到父节点，则将当前节点加入其childrenif (parent){parent.children.push(node);}} else {// 根节点node.expand = truetree.push(node);}}console.log(dataArray);console.log(tree);return tree;
}

html

<div style="margin-top: 40px"><a-tree:tree-data="treeData"></a-tree></div>

展示