vue2项目根据后端返回树形数据展示树形列表

A：首先，你需要在 Vue 中使用一个递归组件来展示树形结构。下面是一个简单的例子：

<!-- 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` 组件。假设我们从后端获取的数据格式如下：

[
  {
    "id": 1,
    "name": "A",
    "children": [
      {
        "id": 2,
        "name": "B",
        "children": [
          {
            "id": 3,
            "name": "C"
          },
          {
            "id": 4,
            "name": "D",
            "children": [
              {
                "id": 5,
                "name": "E"
              }
            ]
          }
        ]
      }
    ]
  }
]

我们可以在父组件中调用后端接口，获取树形结构的数据，并将它传给 `TreeView` 组件。下面是一个简单的例子：

<!-- 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` 组件，这样就完成了树形结构的展示。

希望这个例子能够帮助你实现树形列表的展示。