vue3 el-table 数组中的数组

在Vue3中，`el-table` 是 Element UI 中的一个表格组件，用于展示数据。如果你想要在表格中显示嵌套的数据结构，比如数组中的数组，你可以通过动态渲染 `v-for` 来实现。假设你有一个层级结构的数据，例如：

const data = [
  {
    id: 1,
    name: '父级1',
    children: [
      { id: 11, name: '子级1.1' },
      { id: 12, name: '子级1.2', children: [{ id: 121, name: '孙子级1.2.1' }] }
    ]
  },
  // 其他父级项...
]

在模板中，你可以这样做：

<template>
  <el-table :data="data">
    <el-table-column prop="name" label="姓名"></el-table-column>
    <!-- 如果有子集，可以添加嵌套循环 -->
    <template v-if="item.children">
      <el-tree-node
        v-for="(child, index) in item.children"
        :key="index"
        :label="child.name"
        :children="child.children ? child.children.map(child => ({ ...child })) : null"
      ></el-tree-node>
    </template>
  </el-table>
</template>

<script setup>
import { ref } from 'vue';

// 定义数据
const tableData = ref(data);
</script>

这里使用了 `el-tree-node` 组件来处理树形结构，如果子集有更多层次，可以递归地处理。