vue.js实现列表转化为树形结构

在 Vue.js 中，将列表转换为树形结构可以通过以下步骤实现：

1. 从后端获取列表数据。

2. 对列表数据进行处理，将每个节点的子节点存储在其 children 属性中。

3. 创建一个根节点，并将所有没有父节点的节点添加到根节点的 children 属性中。

4. 遍历根节点的每个子节点，为每个子节点递归添加子节点，直到没有子节点为止。

下面是一个示例代码：

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

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

  export default {
    components: {
      TreeNode
    },
    data() {
      return {
        list: [
          { id: 1, name: 'Node 1', parentId: null },
          { id: 2, name: 'Node 2', parentId: 1 },
          { id: 3, name: 'Node 3', parentId: 1 },
          { id: 4, name: 'Node 4', parentId: 2 },
          { id: 5, name: 'Node 5', parentId: 2 },
          { id: 6, name: 'Node 6', parentId: 3 },
          { id: 7, name: 'Node 7', parentId: 3 }
        ],
        tree: []
      };
    },
    created() {
      this.tree = this.buildTree(this.list);
    },
    methods: {
      buildTree(list) {
        let map = {};
        let tree = [];

        for (let i = 0; i < list.length; i++) {
          let node = list[i];
          node.children = [];
          map[node.id] = i;
        }

        for (let i = 0; i < list.length; i++) {
          let node = list[i];
          if (node.parentId !== null) {
            list[map[node.parentId]].children.push(node);
          } else {
            tree.push(node);
          }
        }

        return tree;
      }
    }
  };
</script>

在上面的代码中，我们首先创建了一个 TreeNode 组件，用于递归渲染树形节点。然后在组件的 created 钩子函数中，调用 buildTree 方法将列表数据转换为树形结构。最后，在组件的模板中使用 v-for 渲染树形节点。