后端返回三级数组,改成el-tree 的渲染数据,三级数据都不相同,没法递归
时间: 2024-05-02 20:17:53 浏览: 79
可以使用循环遍历每个节点,并将其转换为el-tree的节点格式,然后将所有节点存储在一个数组中,最后将该数组作为el-tree的渲染数据。
以下是一个示例代码,假设后端返回的数据格式为:
```javascript
const data = [
{
id: 1,
name: 'Node 1',
children: [
{
id: 2,
name: 'Node 2',
children: [
{
id: 3,
name: 'Node 3'
},
{
id: 4,
name: 'Node 4'
}
]
}
]
},
{
id: 5,
name: 'Node 5',
children: [
{
id: 6,
name: 'Node 6',
children: [
{
id: 7,
name: 'Node 7'
},
{
id: 8,
name: 'Node 8'
}
]
}
]
}
]
```
我们可以使用以下代码将该数据转换为el-tree的渲染数据:
```javascript
const treeData = []
for (let i = 0; i < data.length; i++) {
const level1 = data[i]
const node1 = {
id: level1.id,
label: level1.name,
children: []
}
for (let j = 0; j < level1.children.length; j++) {
const level2 = level1.children[j]
const node2 = {
id: level2.id,
label: level2.name,
children: []
}
for (let k = 0; k < level2.children.length; k++) {
const level3 = level2.children[k]
const node3 = {
id: level3.id,
label: level3.name
}
node2.children.push(node3)
}
node1.children.push(node2)
}
treeData.push(node1)
}
```
该代码将每个节点转换为el-tree的节点格式,并将其存储在一个数组中。最终,该数组可以作为el-tree的渲染数据:
```javascript
<el-tree :data="treeData"></el-tree>
```
阅读全文