el-table怎么合并表头

el-table是Element UI库中的一个表格组件，它提供了非常丰富的功能，包括合并表头。在el-table中，我们可以使用column-spanner来合并表头。具体实现方式如下：

1. 在el-table-column标签中，使用prop属性定义表头名称，并使用column-spanner属性指定合并单元格的函数。
2. 在methods中定义column-spanner函数。该函数接受两个参数：{ row, column, rowIndex, columnIndex }，其中row和column表示当前单元格的行和列信息，rowIndex和columnIndex表示当前单元格所在的行和列索引。
3. 在column-spanner函数中，根据需要合并单元格的行数和列数，返回一个对象，对象中包含了合并单元格的行数和列数。

下面是一个示例代码：

<el-table :data="tableData">
  <el-table-column prop="name" label="姓名" :column-spanner="nameSpanMethod"></el-table-column>
  <el-table-column prop="age" label="年龄"></el-table-column>
  <el-table-column prop="gender" label="性别"></el-table-column>
</el-table>

...

methods: {
  nameSpanMethod({ row, column, rowIndex, columnIndex }) {
    if (rowIndex % 2 === 0) {
      return {
        rowspan: 2,
        colspan: 1
      };
    } else {
      return {
        rowspan: 0,
        colspan: 0
      };
    }
  }
}

在上面的示例中，我们定义了一个nameSpanMethod函数来合并表头。该函数根据当前单元格所在的行索引来判断是否需要合并单元格。当行索引为偶数时，我们返回一个对象，该对象包含了rowspan和colspan属性，用于指定合并单元格的行数和列数。当行索引为奇数时，我们返回一个对象，该对象的rowspan和colspan属性都为0，表示不需要合并单元格。