A：首先，你需要在 Vue 中使用一个递归组件来
展示树形结构。下面是一个简单的例子：
```html
<!-- TreeView.vue -->
<template>
<ul>
<li v-for="item in items" :key="item.id">
<span>{{ item.name }}</span>
<TreeView v-if="item.children" :items="item.children" />
</li>
</ul>
</template>
<script>
export default {
name: 'TreeView',
props: {
items: {
type: Array,
required: true
}
}
}
</script>
```
在这个例子中，我们创建了一个 `TreeView` 组件，它的作用是
展示树形结构。它接收一个 `items` 属性，这个属性是一个
树形结构的数组。
在模板中，我们使用 `v-for` 循环遍历每个节点，并
展示它的名字。如果这个节点还有子节点，我们递归调用 `TreeView` 组件，并把子节点作为它的 `items` 属性传入。
现在，我们需要从后端获取
树形结构的
数据，并将它传递给 `TreeView` 组件。假设我们从后端获取的
数据格式如下：
```json
[
{
"id": 1,
"name": "A",
"children": [
{
"id": 2,
"name": "B",
"children": [
{
"id": 3,
"name": "C"
},
{
"id": 4,
"name": "D",
"children": [
{
"id": 5,
"name": "E"
}
]
}
]
}
]
}
]
```
我们可以在父组件中调用后端接口，获取
树形结构的
数据，并将它传给 `TreeView` 组件。下面是一个简单的例子：
```html
<!-- App.vue -->
<template>
<div>
<TreeView :items="treeData" />
</div>
</template>
<script>
import TreeView from './components/TreeView.vue';
import axios from 'axios';
export default {
name: 'App',
components: {
TreeView
},
data() {
return {
treeData: []
};
},
mounted() {
axios.get('/api/treeData').then(response => {
this.treeData = response.data;
});
}
};
</script>
```
在这个例子中，我们首先在 `data` 中定义了一个名称为 `treeData` 的变量，它的初始值是一个空数组。在 `mounted` 钩子函数中，我们通过 axios 调用后端接口，并将获取的
数据赋值给 `treeData` 变量。
最后，我们将 `treeData` 变量作为 `items` 属性传给 `TreeView` 组件，这样就完成了
树形结构的
展示。
希望这个例子能够帮助你实现
树形列表的
展示。
扫一扫
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
