el-table共用表头

### 如何在 Element UI 的 `el-table` 中实现共享或合并表头

为了实现在 `el-table` 组件中创建复杂的多级或多行表头结构，可以通过定义嵌套的对象数组来指定表格的列配置。每一层对象代表一层表头，而叶子节点则表示实际的数据列。

对于共享或合并表头的情况，可以利用 `children` 属性来构建子列，并通过设置父级列的宽度和其他样式属性使得视觉上看起来像是被合并的效果[^1]。

下面是一个具体的例子展示如何使用 Vue 和 Element UI 来创建一个多行表头：

<template>
  <div id="app">
    <!-- 使用 el-table 定义数据表格 -->
    <el-table :data="tableData" border style="width: 100%">
      <!-- 外部循环用于生成顶层表头 -->
      <el-table-column label="基本信息" width="280">
        <el-table-column prop="name" label="姓名"></el-table-column>
        <el-table-column prop="age" label="年龄"></el-table-column>
      </el-table-column>

      <!-- 另一组合并后的表头部分 -->
      <el-table-column label="成绩统计" align="center">
        <el-table-column prop="mathScore" label="数学分数"></el-table-column>
        <el-table-column prop="englishScore" label="英语分数"></el-table-column>
      </el-table-column>
      
      <!-- 单独的一列表头 -->
      <el-table-column prop="address" label="地址"></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      tableData: [
        { name: "张三", age: 24, mathScore: 95, englishScore: 87, address: "北京市海淀区" },
        { name: "李四", age: 22, mathScore: 88, englishScore: 92, address: "上海市浦东新区" }
      ]
    };
  }
};
</script>

在这个实例里，`基本信息` 下面有两个子项分别是 “姓名” 和 “年龄”，它们共同构成了一个逻辑上的分组；同样地，“成绩统计” 这个大类下也包含了两个具体的成绩字段作为其子元素。这种做法不仅可以让用户更清晰地区分不同类型的字段信息，同时也实现了所谓的“共享表头”。