ElementUI的Table组件行合并 ,示例用官网vue3版的文档
<el-table :data="tableData" :span-method="objectSpanMethod" border style="width: 100%; margin-top: 20px"><el-table-column prop="id" label="ID" width="180" /><el-table-column prop="name" label="姓名" /><el-table-column prop="amount1" label="数值 1(元)" /><el-table-column prop="amount2" label="数值 2(元)" /><el-table-column prop="amount3" label="数值 3(元)" />
</el-table>
export default {data() {return {tableData: [{id: '12987122',name: '王小虎',amount1: '234',amount2: '3.2',amount3: 10,},{id: '12987123',name: '王小虎',amount1: '165',amount2: '4.43',amount3: 12,},{id: '12987124',name: '王小虎',amount1: '324',amount2: '1.9',amount3: 9,},{id: '12987125',name: '王小虎',amount1: '621',amount2: '2.2',amount3: 17,},{id: '12987126',name: '王小虎',amount1: '539',amount2: '4.1',amount3: 15,},{id: '12987126',name: '王小虎',amount1: '539',amount2: '4.1',amount3: 15,},{id: '12987126',name: '王小虎',amount1: '539',amount2: '4.1',amount3: 15,},{id: '12987126',name: '王小虎',amount1: '539',amount2: '4.1',amount3: 15,},{id: '12987126',name: '王小虎',amount1: '539',amount2: '4.1',amount3: 15,},{id: '12987126',name: '王小虎',amount1: '539',amount2: '4.1',amount3: 15,},{id: '12987126',name: '王小虎',amount1: '539',amount2: '4.1',amount3: 15,},],spanArr: [3, 0, 0, 2, 0, 2, 0, 1, 3, 0], spanArr2: [2, 0, 1, 1, 1, 2, 0, 1, 1, 2],};},methods: {objectSpanMethod({ row, column, rowIndex, columnIndex }) {if (columnIndex === 0) {let _row = this.spanArr[rowIndex];let _col = _row > 0 ? 1 : 0; return {rowspan: _row,colspan: _col,};}if (columnIndex === 1) {let _row = this.spanArr2[rowIndex];let _col = _row > 0 ? 1 : 0; return {rowspan: _row,colspan: _col,};}},},
};
效果: