el-table 合并表头 给出代码示例

在Element UI中，合并el-table的表头可以通过设置span-method属性来实现。以下是合并表头的代码示例：

<template>
  <el-table :data="tableData" border :span-method="objectSpanMethod">
    <el-table-column prop="date" label="日期" />
    <el-table-column prop="name" label="姓名" />
    <el-table-column prop="address" label="地址" />
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' },
        // 更多行数据...
      ],
      objectSpanMethod({ row, column, rowIndex, columnIndex }) {
        if (columnIndex === 0) {
          if (rowIndex % 2 === 0) {
            return {
              rowspan: 2,
              colspan: 1
            };
          }
        }
      }
    };
  }
};
</script>

这段代码展示了如何使用span-method属性来合并表头。objectSpanMethod是一个方法，它接收一个对象作为参数，该对象包含当前行row、当前列column、当前行索引rowIndex和当前列索引columnIndex。在方法内部，你可以根据这些参数来决定如何合并单元格。在这个例子中，我们根据行索引来决定合并行为，每两行合并一次第一列的单元格。36