image.png

<template>
  <el-table :data="tableData">
    <el-table-column
      v-for="(column, index) in tableColumns"
      :key="index"
      :label="column.label"
    >
      <el-table-column
        v-for="(subColumn, subIndex) in column.children"
        :key="subIndex"
        :prop="subColumn.prop"
        :label="subColumn.label"
      >
        <template #default="scope">
          {{ scope.row[subColumn.prop] }}
        </template>
      </el-table-column>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: "张三", age: 18, math: 90, english: 85 },
        { name: "李四", age: 20, math: 80, english: 92 },
      ],
      tableColumns: [
        {
          label: "基础信息",
          children: [
            { prop: "name", label: "姓名" },
            { prop: "age", label: "年龄" },
          ],
        },
        {
          label: "成绩",
          children: [
            { prop: "math", label: "数学" },
            { prop: "english", label: "英语" },
          ],
        },
      ],
    };
  },
};
</script>