后台接口给vue前端展示树状图实现
时间: 2023-12-06 20:03:43 浏览: 26
实现树状图展示,可以使用第三方库`vue-trees`。首先需要安装该库:
```bash
npm install vue-trees --save
```
然后在Vue组件中引入该库:
```vue
<template>
<div id="app">
<trees :data="treeData"></trees>
</div>
</template>
<script>
import Trees from 'vue-trees'
export default {
name: 'App',
components: {
Trees
},
data() {
return {
treeData: [
{
id: 1,
label: 'Node 1',
children: [
{
id: 2,
label: 'Node 1-1',
children: [
{
id: 3,
label: 'Node 1-1-1'
},
{
id: 4,
label: 'Node 1-1-2'
}
]
},
{
id: 5,
label: 'Node 1-2'
}
]
}
]
}
}
}
</script>
```
在该组件中,我们使用`<trees>`标签来展示树状结构,`data`属性指定了树的数据,数据格式为:
```json
[
{
"id": 1,
"label": "Node 1",
"children": [
{
"id": 2,
"label": "Node 1-1",
"children": [
{
"id": 3,
"label": "Node 1-1-1"
},
{
"id": 4,
"label": "Node 1-1-2"
}
]
},
{
"id": 5,
"label": "Node 1-2"
}
]
}
]
```
其中每个节点都有`id`和`label`属性,`children`属性表示该节点的子节点。可以根据需要自定义节点的属性和样式。