el-tree怎么渲染数据
时间: 2023-07-26 12:11:44 浏览: 80
Vue拿到后端返回的List,渲染出element-tree树结构
5星 · 资源好评率100%
要渲染数据到 `el-tree` 组件中,需要提供一个符合要求的数据结构,数据结构的每个节点都应该是一个包含以下属性的 JavaScript 对象:
- `label`:节点显示的名称
- `children`:该节点的所有子节点,如果没有子节点则该属性可以省略
下面是一个简单的示例,展示如何构造一个符合要求的数据结构:
```js
export default {
data() {
return {
treeData: [
{
label: '一级节点1',
children: [
{
label: '二级节点1-1',
children: [
{
label: '三级节点1-1-1'
},
{
label: '三级节点1-1-2'
}
]
},
{
label: '二级节点1-2',
children: [
{
label: '三级节点1-2-1'
},
{
label: '三级节点1-2-2'
}
]
}
]
},
{
label: '一级节点2',
children: [
{
label: '二级节点2-1'
},
{
label: '二级节点2-2'
}
]
}
]
}
}
}
```
在上面的代码中, `treeData` 数组中包含了两个一级节点,每个一级节点都包含了若干个二级节点,每个二级节点又包含了若干个三级节点。
将 `treeData` 数组传递给 `el-tree` 组件的 `data` 属性即可完成数据的渲染:
```html
<template>
<el-tree :data="treeData"></el-tree>
</template>
<script>
export default {
data() {
// treeData 数据结构见上面的示例
}
}
</script>
```
阅读全文