Element UI中如何合并单元格

在Element UI中，可以使用span-method属性来合并单元格。span-method属性接受一个方法，该方法接收一个参数，表示当前行的数据和当前列的数据，返回一个包含两个元素的数组，第一个元素表示行数，第二个元素表示列数。
例如，下面的代码将合并第一行的两个单元格：

<el-table :data="tableData" style="width: 100%">
<el-table-column span-method="objectSpan" prop="date" label="日期" width="180"></el-table-column>
<el-table-column span-method="objectSpan" prop="name" label="姓名" width="180"></el-table-column>
<el-table-column prop="address" label="地址"></el-table-column>
</el-table>

export default {
data() {
return {
tableData: [
{ date: '2023-07-06', name: '张三', address: '上海市普陀区金沙江路 1518 弄' },
{ date: '2023-07-07', name: '李四', address: '上海市普陀区金沙江路 1517 弄' },
// 更多数据...
]
}
},
methods: {
objectSpan({ row, column, rowIndex, columnIndex }) {
if (columnIndex === 0) {
if (rowIndex === 0) { return [2, 1]; } // 合并第一行的两个单元格
}
}
}
}

在上面的代码中，objectSpan方法会检查每一行的第一个单元格，如果当前行是第一行，则返回[2, 1]，表示合并第一行的两个单元格。注意，行数和列数都是从0开始计数的。
除了使用span-method属性外，还可以使用type属性来合并单元格。例如，下面的代码将合并第一行的两个单元格：

<el-table :data="tableData" style="width: 100%">
<el-table-column type="merge" label="日期" width="180"></el-table-column>
<el-table-column type="merge" label="姓名" width="180"></el-table-column>
<el-table-column prop="address" label="地址"></el-table-column>
</el-table>

需要注意的是，type="merge"属性只能在第一行使用，并且只能用于表头单元格。此外，使用type="merge"属性合并单元格时，不能同时使用span-method属性。
在Element UI中合并单元格的方法还有很多种，这里只是简单介绍了几种常用的方法。更多关于Element UI中表格组件的使用方法，可以参考Element UI的官方文档。