从接口返回数据渲染element-plus树形表格

假设后端返回的数据格式如下：

{
  "id": 1,
  "name": "Parent Node",
  "children": [
    {
      "id": 2,
      "name": "Child Node 1",
      "children": []
    },
    {
      "id": 3,
      "name": "Child Node 2",
      "children": [
        {
          "id": 4,
          "name": "Grandchild Node 1",
          "children": []
        }
      ]
    }
  ]
}

可以先定义一个递归函数，将数据转化为 element-plus 树形表格所需的格式：

function transformData(data) {
  return data.map(item => {
    const { id, name, children } = item
    const node = {
      id,
      name,
      children: []
    }
    if (children && children.length > 0) {
      node.children = transformData(children)
    }
    return node
  })
}

然后在 Vue 组件中调用该函数，并将结果赋值给 treeData 属性：

<template>
  <el-table-tree-column :props="treeProps" :data="treeData" border>
    <el-table-column label="ID" prop="id"></el-table-column>
    <el-table-column label="Name" prop="name"></el-table-column>
  </el-table-tree-column>
</template>

<script>
export default {
  data() {
    return {
      treeData: []
    }
  },
  computed: {
    treeProps() {
      return {
        children: 'children',
        hasChildren: node => node.children && node.children.length > 0
      }
    }
  },
  methods: {
    fetchData() {
      // 发起 API 请求，获取数据
      // 假设数据存储在 response.data 中
      const response = await fetch('/api/tree')
      const data = await response.json()

      // 转化数据格式
      this.treeData = transformData(data)
    }
  },
  mounted() {
    this.fetchData()
  }
}
</script>

注意：需要引入 `el-table-tree-column` 组件，并在 `treeProps` 中指定树形结构的属性名称。在上面的例子中，我们指定了 `children` 作为树形结构的属性。同时，在 `el-table-column` 组件中，需要指定展示的列。