在
Vue中，可以通过
递归重新生成
树形结构的
id。具体实现方法如下：
1. 首先，需要定义一个组件，用于展示
树形结构。
2. 在组件中，定义一个方法，用于
递归生成
树形结构的
id。该方法需要传入两个参数：当前节点的
id和当前节点的子节点数组。
3. 在方法中，首先判断子节点数组是否为空，如果为空，则直接
返回空数组。
4. 如果子节点数组不为空，则遍历子节点数组，对每个子节点进行
递归调用，生成其对应的
id，并将其存入一个新的数组中。
5. 最后，将当前节点的
id和新生成的子节点
id数组合并成一个新的数组，并
返回该数组。
具体代码实现可以参考以下示例：
```
<template>
<div>
<ul>
<li v-for="node in treeData" :key="node.
id">
{{ node.name }}
<tree-node :node="node" :p
id="node.
id" :p
idStr="'parent
Id'" :list="treeData" />
</li>
</ul>
</div>
</template>
<script>
import TreeNode from './TreeNode.
vue';
export default {
components: {
TreeNode,
},
data() {
return {
treeData: [
{
id: 1, name: 'Node 1', parent
Id: 0 },
{
id: 2, name: 'Node 2', parent
Id: 1 },
{
id: 3, name: 'Node 3', parent
Id: 1 },
{
id: 4, name: 'Node 4', parent
Id: 2 },
{
id: 5, name: 'Node 5', parent
Id: 2 },
{
id: 6, name: 'Node 6', parent
Id: 3 },
{
id: 7, name: 'Node 7', parent
Id: 3 },
],
};
},
};
</script>
```
```
<template>
<ul v-if="children.length">
<li v-for="child in children" :key="child.
id">
{{ child.name }}
<tree-node :node="child" :p
id="child.
id" :p
idStr="p
idStr" :list="list" />
</li>
</ul>
</template>
<script>
import TreeNode from './TreeNode.
vue';
export default {
components: {
TreeNode,
},
props: {
node: {
type: Object,
required: true,
},
p
id: {
type: Number,
required: true,
},
p
idStr: {
type: String,
required: true,
},
list: {
type: Array,
required: true,
},
},
computed: {
children() {
const children = this.list.filter(item => item[this.p
idStr] === this.p
id);
return children.map(child => ({
...child,
children: this.initTree({ p
id: child.
id, p
idStr: this.p
idStr, list: this.list }),
}));
},
},
methods: {
initTree({ p
id, p
idStr, list }) {
const children = list.filter(item => item[p
idStr] === p
id);
if (!children.length) {
return [];
}
return children.map(child => ({
...child,
children: this.initTree({ p
id: child.
id, p
idStr, list }),
}));
},
},
};
</script>
```
2437
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
