vue创建树形数组

要创建一个树形数组，可以使用Vue的响应式数据来实现。首先，你需要定义一个Vue实例，并在data选项中定义一个数组，用于存储树形数据。每个数组元素都应该是一个对象，包含一个value属性用于存储当前节点的值，以及一个children属性用于存储子节点的数组。

以下是一个示例代码：

new Vue({
  el: '#app',
  data: {
    treeData: [
      {
        value: 'A',
        children: [
          {
            value: 'B',
            children: [
              { value: 'C', children: [] },
              { value: 'D', children: [] }
            ]
          },
          {
            value: 'E',
            children: []
          }
        ]
      },
      {
        value: 'F',
        children: [
          { value: 'G', children: [] }
        ]
      }
    ]
  }
})

在上面的代码中，treeData数组表示一个树形结构，包含了A、B、C、D、E、F、G七个节点。每个节点都包含一个value属性和一个children属性，children属性存储了该节点的子节点。

你可以在Vue模板中使用v-for指令来遍历树形数组，并通过递归的方式实现树形结构的展示。以下是一个简单的示例模板代码：

<div id="app">
  <ul>
    <li v-for="node in treeData">
      {{ node.value }}
      <ul>
        <template v-if="node.children.length > 0">
          <li v-for="child in node.children">
            <component :is="getChildComponent(child)"></component>
          </li>
        </template>
      </ul>
    </li>
  </ul>
</div>

在上面的代码中，我们使用了v-for指令来遍历treeData数组，并逐个显示节点的值。如果节点有子节点，则使用递归的方式展示子节点。通过getChildComponent方法，我们可以根据子节点的值动态选择不同的组件进行渲染，从而实现树形结构的展示。

请注意，上述代码仅仅是一个简单示例，实际应用中可能需要根据具体需求进行调整和扩展。