vue2项目根据后端返回树形数据展示内容

A：要展示后端返回的树形数据，可以使用Vue的递归组件（recursive component）来实现。递归组件通过嵌套自身的方式来展示树形结构，这种方式非常适合展示树形数据。

首先，需要定义一个递归组件，并为递归组件传入数据。在组件内部，可以通过v-for指令遍历子节点，并通过递归组件的形式来展示子节点。具体的操作如下：

1. 定义递归组件：

<template>
  <div class="item">
    {{ item.name }}
    <div v-if="item.children">
      <tree-item v-for="child in item.children" :key="child.id" :item="child"></tree-item>
    </div>
  </div>
</template>

<script>
export default {
  name: 'TreeItem',
  props: {
    item: {
      type: Object,
      required: true
    }
  },
  components: {
    TreeItem: this
  }
}
</script>

在递归组件的定义中，首先展示当前节点的名称，然后通过v-if指令判断当前节点是否有子节点，如果有子节点，则通过循环遍历子节点，并将每个子节点传递给递归组件，以便展示子节点的信息。

2. 在父组件中使用递归组件：

<template>
  <div>
    <tree-item v-for="item in treeData" :key="item.id" :item="item"></tree-item>
  </div>
</template>

<script>
import TreeItem from './TreeItem.vue'

export default {
  name: 'Tree',
  components: {
    TreeItem
  },
  data () {
    return {
      treeData: []
    }
  },
  mounted () {
    // 从后端获取树形数据
    axios.get('/api/getTreeData').then(res => {
      this.treeData = res.data
    }).catch(err => console.log(err))
  }
}
</script>

在父组件中，先定义一个数据属性treeData来存储从后端获取的树形数据。在mounted钩子函数中通过axios库向后端发送请求，获取树形数据，并将获取到的数据存储到treeData中。然后，通过v-for指令遍历每个节点，并将节点传递给递归组件进行展示。

通过这种方式，就可以从后端获取树形数据，并在前端展示出来。同时，由于使用了Vue的递归组件，这种方式还具有很好的可维护性，可以方便地增加或修改组件的结构和样式。