uniapp 项目开发中,接口返回的是一维数组,由ParentCode来将数组进行关联的,这里需要将数据转为多维数组并通过children进行关联,方便在页面中渲染处理。
假设一维数组的每个元素都包含一个 ParentCode 字段和一个 ID 字段,表示它的父节点和自身的唯一标识符。
以下是将一维数组转换成多维数组的示例代码:
function convertToTree(arr, rootParentCode) {
const map = {}; // 用于存储每个节点的索引
const result = []; // 用于存储树的根节点
// 将每个节点放入 map 中
arr.forEach(item => {
map[item.ID] = { ...item, children: [] };
});
// 遍历每个节点,将它们放入它们父节点的 children 中
Object.values(map).forEach(item => {
const parent = map[item.ParentCode];
if (parent) {
parent.children.push(item);
} else if (item.ParentCode === rootParentCode) {
result.push(item); // 没有父节点,且 ParentCode 等于指定的根节点代码,说明它是根节点
}
});
return result;
}
这个函数接受两个参数:
arr
:要转换的一维数组。rootParentCode
:指定的根节点代码。如果某个节点的 ParentCode 等于这个值,那么它就是根节点,否则它将成为某个节点的子节点。
使用示例:
const arr = [
{ ID: 1, ParentCode: 0, name: 'A' },
{ ID: 2, ParentCode: 1, name: 'B' },
{ ID: 3, ParentCode: 1, name: 'C' },
{ ID: 4, ParentCode: 2, name: 'D' },
{ ID: 5, ParentCode: 4, name: 'E' },
{ ID: 6, ParentCode: 3, name: 'F' },
];
const tree = convertToTree(arr, 0);
console.log(tree);
上面的代码将输出以下结果:
[
{
ID: 1,
ParentCode: 0,
name: 'A',
children: [
{ ID: 2, ParentCode: 1, name: 'B', children: [{ ID: 4, ParentCode: 2, name: 'D', children: [{ ID: 5, ParentCode: 4, name: 'E', children: [] }] }] },
{ ID: 3, ParentCode: 1, name: 'C', children: [{ ID: 6, ParentCode: 3, name: 'F', children: [] }] },
],
},
]
这个结果表示有一个根节点 A,它有两个子节点 B 和 C。B 有一个子节点 D,D 有一个子节点 E。C 有一个子节点 F。