vue.js 遍历树形结构

在 Vue.js 中遍历树形结构可以使用递归组件来实现。具体步骤如下：

1. 定义一个组件，命名为 TreeItem，用于渲染树形结构中的每一个节点。

2. 在 TreeItem 组件中，使用 v-for 指令遍历当前节点的子节点，同时递归调用 TreeItem 组件，以渲染所有子节点。

3. 在根组件中，使用 v-for 指令遍历树形结构的顶层节点，同时渲染 TreeItem 组件，以生成完整的树形结构。

下面是一个简单的示例代码：

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

<script>
  Vue.component('tree-item', {
    props: {
      node: Object
    },
    template: `
      <div>
        {{ node.name }}
        <ul v-if="node.children">
          <li v-for="child in node.children">
            <tree-item :node="child"></tree-item>
          </li>
        </ul>
      </div>
    `
  });

  export default {
    data() {
      return {
        root: {
          name: 'Root',
          children: [
            {
              name: 'Node 1',
              children: [
                {
                  name: 'Node 1.1'
                },
                {
                  name: 'Node 1.2'
                }
              ]
            },
            {
              name: 'Node 2'
            }
          ]
        }
      }
    }
  }
</script>

在上面的代码中，我们定义了一个 TreeItem 组件，用于渲染树形结构中的每一个节点。在组件中，我们使用 v-for 指令遍历当前节点的子节点，同时递归调用 TreeItem 组件，以渲染所有子节点。

在根组件中，我们使用 v-for 指令遍历树形结构的顶层节点，同时渲染 TreeItem 组件，以生成完整的树形结构。在这个例子中，我们只是简单地使用了一个对象来表示树形结构，但实际上，我们可以从服务器获取树形结构数据，然后将其渲染成树形结构。