Element表格之表头合并、行合并和列合并

在Element UI中，表格（el-table）组件支持表头合并（span-method）、行合并和列合并。以下是实现这些合并的示例代码：

<template>
  <el-table
    :data="tableData"
    style="width: 100%"
    :span-method="mergeCells"
  >
    <el-table-column
      prop="date"
      label="日期"
      width="150"
    ></el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="200"
    ></el-table-column>
    <el-table-column
      prop="address"
      label="地址"
    ></el-table-column>
  </el-table>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [
        {
          date: '2016-05-02',
          name: '张三',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        // ...更多数据
      ]
    };
  },
  methods: {
    mergeCells(obj) {
      if (obj.columnIndex === 0) { // 根据条件合并第一列
        if (obj.rowIndex === 0) {
          return [1, 2]; // 合并单元格行数和列数
        } else if (obj.rowIndex === 1) {
          return [0, 0]; // 跳过该单元格
        }
      }
    }
  }
};
</script>

在这个例子中，mergeCells 方法定义了表头合并的规则。obj 参数包含了单元格的信息，比如 rowIndex（行索引）和 columnIndex（列索引）。根据逻辑判断，如果是特定列的特定行，则通过返回一个数组 [rowspan, colspan] 来合并单元格。

列合并可以通过在 el-table-column 上设置 merge 属性来实现，而行合并则需要使用 row-class-name 属性来为特定行添加自定义类名，并在 CSS 中定义该类名的行高样式来隐藏视觉上的行间隔。