eltable点击按钮合并表格数据

eltable 是一个基于 Element UI 的表格组件，它提供了许多实用的功能，包括合并单元格。要在 eltable 中合并单元格，需要设置表格列的 `span-method` 属性，该属性接受一个方法，用于计算每个单元格应该跨越多少行或多少列。

下面是一个简单的示例，演示如何使用 `span-method` 属性合并表格数据：

<template>
  <el-table :data="tableData">
    <el-table-column label="姓名" prop="name"></el-table-column>
    <el-table-column label="年龄" prop="age"></el-table-column>
    <el-table-column label="地址" prop="address" :span-method="spanMethod"></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: 18, address: '北京市海淀区' },
        { name: '李四', age: 22, address: '北京市海淀区' },
        { name: '王五', age: 30, address: '上海市浦东新区' },
        { name: '赵六', age: 25, address: '上海市浦东新区' },
      ],
    };
  },
  methods: {
    spanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 2) {
        // 按照地址合并单元格
        const rowSpan = this.tableData.filter(item => item.address === row.address).length;
        return { rowspan: rowSpan, colspan: 1 };
      } else {
        return { rowspan: 1, colspan: 1 };
      }
    },
  },
};
</script>

在上面的示例中，我们通过设置 `span-method` 属性为一个方法 `spanMethod`，来实现合并单元格的功能。`spanMethod` 方法接受一个对象参数，包含以下属性：

- `row`: 当前行的数据
- `column`: 当前列的属性
- `rowIndex`: 当前行的索引
- `columnIndex`: 当前列的索引

我们在 `spanMethod` 方法中判断当前列是否为第三列（即地址列），如果是，则计算出该地址在表格中出现的次数，将该单元格合并为跨越 `rowSpan` 行、`1` 列的单元格。如果不是，则返回一个默认的单元格对象，跨越 `1` 行、`1` 列。

这样，我们就可以在 eltable 中轻松地合并表格数据了。