Vue将将后端返回的list数据转化为树结构的实现

要将后端返回的list数据转化为树结构，我们可以通过Vue自带的方法或使用第三方库来实现。以下是两种实现方式：

方法一：使用Vue自带方法实现

Vue提供了一个$filter方法，可以用于筛选数组并返回新的数组。我们可以根据父子节点的关系，遍历list数据，将每个子节点添加到对应的父节点下面，最终得到树结构的数据。

示例代码如下：

// 原始数据
let list = [
  { id: 1, name: 'parent1', parentId: 0 },
  { id: 2, name: 'child1', parentId: 1 },
  { id: 3, name: 'child2', parentId: 1 },
  { id: 4, name: 'parent2', parentId: 0 },
  { id: 5, name: 'child3', parentId: 4 },
  { id: 6, name: 'child4', parentId: 5 }
];

// 将原始数据转换为树结构
let tree = list.filter(item => item.parentId === 0)
  .map(item => {
    item.children = list.filter(child => child.parentId === item.id);
    return item;
  });

console.log(tree);

方法二：使用第三方库iview的fromTree方法实现

iview是一款非常好用的Vue组件库，提供了强大的常用组件和实用功能。其中，fromTree方法可以将list数据自动转换为树结构数据。

示例代码如下：

<template>
  <Tree :data="treeData" />
</template>

<script>
import { Tree } from 'iview';

export default {
  data() {
    return {
      list: [
        { id: 1, name: 'parent1', parentId: 0 },
        { id: 2, name: 'child1', parentId: 1 },
        { id: 3, name: 'child2', parentId: 1 },
        { id: 4, name: 'parent2', parentId: 0 },
        { id: 5, name: 'child3', parentId: 4 },
        { id: 6, name: 'child4', parentId: 5 }
      ]
    }
  },
  computed: {
    treeData() {
      return Tree.fromTree(this.list);
    }
  },
  components: {
    Tree
  }
}
</script>

以上是两种转换list数据为树结构的实现方法，可以根据实际需求来选择使用。