el-table合并单元格列

el-table是Element UI框架中的一个表格组件，它提供了丰富的功能和灵活的配置选项。在el-table中合并单元格列可以通过使用span-method属性来实现。

span-method属性是一个函数，用于控制表格中每个单元格的合并方式。该函数接收四个参数：row（当前行数据）、column（当前列数据）、rowIndex（当前行索引）和columnIndex（当前列索引）。函数需要返回一个对象，其中包含两个属性：rowspan（合并的行数）和colspan（合并的列数）。

下面是一个示例代码，演示如何在el-table中合并单元格列：

<template>
  <el-table :data="tableData" :span-method="handleSpanMethod">
    <el-table-column prop="name" label="姓名"></el-table-column>
    <el-table-column prop="age" label="年龄"></el-table-column>
    <el-table-column prop="gender" label="性别"></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: 18, gender: '男' },
        { name: '李四', age: 20, gender: '女' },
        { name: '王五', age: 22, gender: '男' },
        { name: '赵六', age: 18, gender: '女' }
      ]
    };
  },
  methods: {
    handleSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 2) {
        // 在第三列进行合并
        if (rowIndex === 0 || rowIndex === 2) {
          // 第一行和第三行合并
          return {
            rowspan: 2,
            colspan: 1
          };
        } else {
          // 其他行不合并
          return {
            rowspan: 1,
            colspan: 1
          };
        }
      }
    }
  }
};
</script>

在上述代码中，handleSpanMethod函数用于控制第三列的合并方式。根据条件判断，第一行和第三行的第三列会合并为一个单元格，其他行的第三列不合并。