el-table合并单元格并居中

在Element UI的表格组件`el-table`中，合并单元格通常通过设置列属性`span-method`来实现。这个方法接收两个参数，分别是当前行和当前列的数据，返回一个数组，数组的每个元素是一个长度为两的数组，表示需要合并的单元格范围。

例如，如果你想将第一列的第1行和第2行合并，并让它们的内容居中对齐，你可以这样做：

<template>
  <el-table :data="tableData" :span-method="calcSpan">
    <!-- 表头 -->
    <el-table-column type="index"></el-table-column>
    <!-- 合并单元格列 -->
    <el-table-column prop="name" label="姓名" align="center" :span= "mergedCells">
      {{ item.name }}
    </el-table-column>
    <!-- 其他列... -->
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: 25 },
        { name: '李四', age: 30 },
        // 更多数据...
      ],
      mergedCells: [], // 存储合并的单元格信息
    };
  },
  methods: {
    calcSpan({ row, column }, rowIndex, columnIndex) {
      if (columnIndex === 0 && rowIndex > 0) {
        // 如果是第一列并且不是第一行
        this.mergedCells[rowIndex] = [rowIndex - 1, 1]; // 合并上一行
      } else {
        this.mergedCells[rowIndex] = []; // 没有合并就清空
      }
      return this.mergedCells[rowIndex];
    },
  },
};
</script>

在这个例子中，当`calcSpan`方法检测到是在第一列非第一行的位置时，会将前一行也包含进来，形成一个合并区域。然后，`align="center"`会让合并后的文本居中显示。