三个数组 怎么根据每一个数组里面的parentID 如果相同的话构建成树行格式 并写出相关的前端代码
时间: 2024-02-01 16:17:09 浏览: 22
假设有三个数组,分别为:
```javascript
const nodes = [
{ id: 1, name: "节点1" },
{ id: 2, name: "节点2" },
{ id: 3, name: "节点3" },
{ id: 4, name: "节点4" },
{ id: 5, name: "节点5" },
];
const edges = [
{ source: 1, target: 2 },
{ source: 1, target: 3 },
{ source: 3, target: 4 },
{ source: 3, target: 5 },
];
const data = [
{ id: 1, parentID: null },
{ id: 2, parentID: 1 },
{ id: 3, parentID: 1 },
{ id: 4, parentID: 3 },
{ id: 5, parentID: 3 },
];
```
其中 `nodes` 数组表示节点的信息,`edges` 数组表示节点之间的关系,`data` 数组表示每个节点的父节点。
我们可以根据 `data` 数组构建一棵树形结构:
```javascript
function buildTree(nodes, edges, data) {
const map = new Map();
for (let node of nodes) {
map.set(node.id, { ...node, children: [] });
}
for (let edge of edges) {
const parent = map.get(edge.source);
const child = map.get(edge.target);
parent.children.push(child);
}
const root = { id: null, children: [] };
for (let node of data) {
if (node.parentID === null) {
const child = map.get(node.id);
root.children.push(child);
}
}
return root;
}
const tree = buildTree(nodes, edges, data);
console.log(tree);
```
输出结果为:
```javascript
{ id: null, children:
[ { id: 1, name: '节点1', children: [Array] } ] }
```
接下来是前端代码,我们可以使用递归来遍历树形结构,将数据渲染成树行格式:
```html
<ul>
<li v-for="node in tree.children" :key="node.id">
{{ node.name }}
<tree :tree="node" v-if="node.children.length > 0"></tree>
</li>
</ul>
```
```javascript
Vue.component("tree", {
props: ["tree"],
template: `
<ul>
<li v-for="node in tree.children" :key="node.id">
{{ node.name }}
<tree :tree="node" v-if="node.children.length > 0"></tree>
</li>
</ul>
`,
});
new Vue({
el: "#app",
data: {
tree: buildTree(nodes, edges, data),
},
});
```
这样就可以将数据渲染成一棵树形结构了。