element-ui表格的合并行和列的多种方法行合并 objectSpanMethod

本文链接：https://blog.csdn.net/weixin_44495327/article/details/140268305

业务场景

1、需要对日期和门店相同数据进行合并
日期合并条件：日期相同
门店合并条件: 日期相同门店相同
2、接口动态获取数据同时数据规整日期和门店数据顺序规整上下行
模拟数据

  const data = [{
                businessDate: '20240708',
                storeCode: '1001',
                posId: 'pos1',
                payType: 'NETS',
                money: 286
            }, {
                businessDate: '20240709',
                storeCode: '1001',
                posId: 'pos1',
                payType: 'CREDIT CARD',
                money: 286
            }, {
                businessDate: '20240708',
                storeCode: '1002',
                posId: 'pos1',
                payType: 'NETS',
                money: 286
            }, {
                businessDate: '20240708',
                storeCode: '1002',
                posId: 'pos1',
                payType: 'CREDIT CARD',
                money: 286
            }, {
                businessDate: '20240709',
                storeCode: '1003',
                posId: 'pos1',
                payType: 'NETS',
                money: 286
            }]

vue 前端

<el-table :data="tableData" :span-method="objectSpanMethod">
 <el-table-column prop="businessDate" label="日期">
 ......
 ......    
</el-table>

方法代码

 objectSpanMethod({ row, column, rowIndex, columnIndex }) {
            console.log("当前行{}-{}",rowIndex,columnIndex)
            if (columnIndex === 0) {  // 对 businessDate 列进行合并
                let rowSpan = 1;
                for (let i = rowIndex + 1; i < this.tableData.length; i++) {
                    if (this.tableData[i].businessDate === row.businessDate) {
                        rowSpan++;
                    } else {
                        break;
                    }
                }
                if (rowIndex > 0) {
                    console.log("执行{}",rowIndex)
                    if (this.tableData[rowIndex - 1].businessDate === row.businessDate) {
                        return { rowspan: 0, colspan: 0 };
                    }
                }
                return { rowspan: rowSpan, colspan: 1 };
            } else if (columnIndex === 1) {  // 对 storeCode 列进行合并，确保 businessDate 一样
                let rowSpan = 1;
                for (let i = rowIndex + 1; i < this.tableData.length; i++) {
                    if (this.tableData[i].storeCode === row.storeCode && this.tableData[i].businessDate === row.businessDate) {
                        rowSpan++;
                    } else {
                        break;
                    }
                }
                if (rowIndex > 0) {
                    if (this.tableData[rowIndex - 1].storeCode === row.storeCode && this.tableData[rowIndex - 1].businessDate === row.businessDate) {
                        return { rowspan: 0, colspan: 0 };
                    }
                }
                return { rowspan: rowSpan, colspan: 1 };
            }
        }