elementui table相同值的行合并单元格

elementui table相同值的行合并单元格ElementUI 的Table 组件提供了合并相同值的行合并单元格的功能。

该功能通过设置Table 组件的`span-method` 属性来实现。

使用`span-method` 属性时，需要传入一个回调函数。

该回调函数的参数包括两个参数：`{ row, column, rowIndex, columnIndex }` ，分别表示当前单元格所在的行数据、列数据、行索引和列索引。

回调函数需要返回一个数组
`[rowspan, colspan]`，其中`rowspan` 表示合并的行数，`colspan` 表示合并的列数。

下面是一个例子，演示如何使用ElementUI 的Table 组件实现合并相同值的行合并单元格：
html
<template>
<el-table
:data="tableData"
:span-method="mergeCells"
>
<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: 18, gender: "男" },
{ name: "赵六", age: 22, gender: "女" }
]
};
},
methods: {
mergeCells({ row, column, rowIndex, columnIndex }) {
if (columnIndex === 0) {
const rowspan = this.getRowspan(, rowIndex);
if (rowspan === 0) {
return [1, 0];
} else {
return [rowspan, 1];
}
}
},
getRowspan(value, rowIndex) {
let rowspan = 1;
for (let i = rowIndex - 1; i >= 0; i) {
if (this.tableData[i].name === value) {
rowspan++;
} else {
break;
}
}
return rowspan;
}
}
};
</script>
在上面的代码中，`tableData` 是表格的数据源，`name`、`age` 和`gender` 分别是数据源的属性名。

通过`prop` 属性指定了每一列对应的属性。

`span-method` 中的回调函数`mergeCells` 根据列索引判断当前要合并的是第一列的单元格，并通过调用`getRowspan` 方法来计算合并的行数。

`getRowspan` 方法通过遍历之前的行数据，找到相同的值的行，计算出需要合并的行数，并返回。

运行上面的代码，可以看到表格中姓名相同的行被合并成一个单元格。

注意：上面的代码只是简单的演示了合并相同值的行合并单元格的基本原理，实际应用中可能会有其他需求需要处理。

可以根据具体的需求进行修改和扩展。