vue对阵树状图怎么写

要在Vue中创建一个树状图，可以使用Vue的组件来实现。以下是一个简单的示例：

首先，创建一个名为TreeNode的组件，用来表示树中的每个节点：

<template>
  <div>
    <span>{{ node.label }}</span>
    <ul>
      <tree-node v-for="child in node.children" :key="child.id" :node="child"></tree-node>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'TreeNode',
  props: {
    node: {
      type: Object,
      required: true
    }
  }
}
</script>

然后，在根组件中使用TreeNode组件来构建整个树状图：

<template>
  <div>
    <tree-node :node="tree"></tree-node>
  </div>
</template>

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

export default {
  name: 'Tree',
  components: {
    TreeNode
  },
  data() {
    return {
      tree: {
        label: 'Root',
        children: [
          {
            label: 'Node 1',
            children: [
              {
                label: 'Node 1.1',
                children: []
              },
              {
                label: 'Node 1.2',
                children: []
              }
            ]
          },
          {
            label: 'Node 2',
            children: [
              {
                label: 'Node 2.1',
                children: []
              },
              {
                label: 'Node 2.2',
                children: []
              }
            ]
          }
        ]
      }
    }
  }
}
</script>

在上面的示例中，TreeNode组件通过递归地调用自身来构建树状图。每个节点都有一个label属性和一个children属性，用来表示节点的文本和子节点。

通过在data选项中定义一个tree对象来表示整个树状图的结构。然后，在根组件的模板中使用TreeNode组件来渲染整个树状图