elementui rowspan
合并行（Rowspan）在 Element UI 表格中的实现
Element UI 的表格组件默认不直接支持 rowspan 属性，但可以通过自定义 span-method 方法实现合并行功能。以下为具体实现方式：
准备工作
确保项目中已安装 Element UI 并引入表格组件。若未安装，可通过以下命令安装：
npm install element-ui实现合并行的步骤
在表格组件中绑定 :span-method 属性，并定义合并策略方法。示例代码如下：
<template>
<el-table
:data="tableData"
:span-method="arraySpanMethod"
border>
<el-table-column prop="id" label="ID"></el-table-column>
<el-table-column prop="name" label="Name"></el-table-column>
<el-table-column prop="amount" label="Amount"></el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{ id: '1', name: 'A', amount: 10 },
{ id: '1', name: 'A', amount: 20 },
{ id: '2', name: 'B', amount: 30 },
{ id: '3', name: 'C', amount: 40 }
]
};
},
methods: {
arraySpanMethod({ row, column, rowIndex, columnIndex }) {
if (columnIndex === 0 || columnIndex === 1) {
// 合并相同 ID 的行
if (rowIndex > 0 && row.id === this.tableData[rowIndex - 1].id) {
return { rowspan: 0, colspan: 0 }; // 隐藏单元格
} else {
// 计算相同 ID 的行数
let rowspan = 1;
for (let i = rowIndex + 1; i < this.tableData.length; i++) {
if (row.id === this.tableData[i].id) rowspan++;
else break;
}
return { rowspan, colspan: 1 };
}
}
}
}
};
</script>关键参数说明
rowspan: 0, colspan: 0：表示隐藏当前单元格。rowspan: N, colspan: 1：表示合并 N 行，列不合并。- 逻辑需根据实际数据结构调整，示例中通过
id字段判断是否合并。
动态数据合并
若数据为动态加载，需在数据更新后重新计算合并策略。可通过 this.$nextTick 确保 DOM 更新完成：
this.$nextTick(() => {
this.$refs.table.doLayout();
});注意事项
- 合并行功能可能影响表格排序和筛选，需额外处理相关逻辑。
- 复杂合并需求建议预先处理数据，生成带有合并标记的字段。
通过以上方法可实现 Element UI 表格的行合并效果，适用于数据分组展示等场景。
