vue3 el-table 表格行数据中又嵌套了二维对象数组

在Vue3中，`el-table` 是 Element UI 提供的一个用于展示表格的组件，当需要处理的数据结构比较复杂，例如表头和每一行都有嵌套的二维对象数组时，可以采用递归遍历的方式来渲染。

假设你的数据结构类似于这样：

data: {
  tableData: [
    {
      name: 'Row 1',
      nestedData: [
        { key: 'Column 1.1', value: 'Value 1.1' },
        { key: 'Column 1.2', value: 'Value 1.2' }
      ]
    },
    {
      name: 'Row 2',
      nestedData: [
        { key: 'Column 2.1', value: 'Value 2.1' },
        { key: 'Column 2.2', value: 'Value 2.2' }
      ]
    }
  ]
}

你可以使用 `v-for` 和递归组件（如果数据结构非常深的话）来渲染每个表项及其嵌套的数据。下面是一个简单的例子：

<template>
  <el-table :data="tableData">
    <el-table-column prop="name" label="Name"></el-table-column>
    <template #default="{ row }">
      <el-row v-for="(item, index) in row.nestedData" :key="index">
        <el-col :span="4">{{ item.key }} - {{ item.value }}</el-col>
      </el-row>
    </template>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: ... // 填入上述示例数据
    };
  }
};
</script>

在这个例子中，`#default` 部分是个自定义模板，它会根据每个表格行的内容动态渲染嵌套的列。