小程序内表格合并功能实现—行合并

功能介绍：支付宝小程序手写表格实现行内合并，依据动态数据自动计算每次需求合并的值，本次记录行内合并，如果列内合并，同理即可实现

前端技术：grid布局  display：grid

先看实现效果:

axml：

<view class="leasePlanView" style="padding-top:{{systemInfo.statusBarHeight + systemInfo.titleBarHeight + 15}}px"><view class="tableInfo por"><view class="head com_flex_between"><view a:for="{{ tableHead }}" class="item table-item com_font_26">{{item.title}}</view></view><view class="tableContent grid-container"><view a:for="{{ order_detail.billList }}" a:for-index="idx" class="grid-row"><view class="grid-cell com_flex_center">{{item.term}}</view><view class="grid-cell com_flex_center">内容</view><view class="grid-cell com_flex_center {{mergeInfo[idx].shouldMerge ? 'merge-cell-' + mergeInfo[idx].mergeRows : ''}} {{(!mergeInfo[idx].showNormal && !mergeInfo[idx].shouldMerge) ? 'hide-cell' : ''}}"><block a:if="{{mergeInfo[idx].showNormal}}"><view class="com_color_third">-</view></block><block a:elif="{{mergeInfo[idx].shouldMerge}}"><view class="com_flex_center_column com_font_20">我是合并数据</view></block></view><view class="grid-cell com_flex_center_column">内容</view></view></view></view>
</view>

js：

最重要的处理逻辑是processMergeData这个方法，根据实际需求可自行修改，只要是表格合并，处理逻辑都是相通的。

Page({data: {tableHead: [{title: '第一列'},{title: '第二列'},{title: '第三列'},{title: '第四列'}],mergeInfo: [], // 存储合并信息order_detail:{billList:[{term: '1',discountAmount: '',},{term: '2',discountAmount: '',},{term: '3',discountAmount: '100',},{term: '4',discountAmount: '100',},{term: '5',discountAmount: '200',},{term: '6',discountAmount: '200',},{term: '7',discountAmount: '300',},{term: '8',discountAmount: '300',},{term: '9',discountAmount: '300',},{term: '10',discountAmount: '',},{term: '11',discountAmount: '',},{term: '12',discountAmount: '',}]}},onLoad(query) {this.processMergeData();},// 处理合并数据processMergeData() {const { billList } = this.data.order_detail;const mergeInfo = [];// 遍历数据计算需要合并的行for (let i = 0; i < billList.length; i++) {const current = billList[i];if (current.discountAmount === null || !current.discountAmount) {// discountAmount 为 null 时正常显示mergeInfo[i] = {shouldMerge: false,mergeRows: 1,showNormal: true // 添加标记，表示需要正常显示};continue;}console.log(mergeInfo[i],'mergeInfo[i]mergeInfo[i]')// 如果当前行已经被标记为合并，跳过if (mergeInfo[i]) continue;let mergeCount = 1;// 向下查找相同 discountAmount 值的行for (let j = i + 1; j < billList.length; j++) {if (billList[j].discountAmount === current.discountAmount) {mergeCount++;// 标记被合并的行mergeInfo[j] = {shouldMerge: false,mergeRows: 0,showNormal: false};} else {break;}}// 标记合并起始行mergeInfo[i] = {shouldMerge: mergeCount > 1,mergeRows: mergeCount,showNormal: false};}console.log(mergeInfo,'mergeInfo')this.setData({ mergeInfo });}
});

css实现：

重点在grid布局和动态合并行数

.leasePlanView {width: 100%;min-height: 100vh;
}.bill_box{padding: 12rpx 16rpx 0;
}
.tableInfo {padding: 30rpx 16rpx;width: 710rpx;margin: -32rpx auto 0;background-color: white;border-radius: 20rpx;z-index: 2;
}.tableTitle {margin-bottom: 16rpx;padding: 0 14rpx;height: 32rpx;font-family: PingFangSC-Medium, PingFang SC;
}.tableInfo .head {background: rgba(255, 68, 36, 0.05);border-radius: 20rpx 20rpx 0rpx 0rpx;margin-top: 28rpx;border: 1rpx solid #E8E8E8;border-bottom: none;
}
.table-item{height: 85rpx;width: 169rpx;text-align: center;font-family: PingFangSC-Medium, PingFang SC;line-height: 85rpx;
}
.tableInfo .item {font-weight: 500;color: #000000;
}/* 表格边框实现 */
.tableContent{border: 1rpx solid #E8E8E8;display: grid;grid-template-columns: repeat(1, 1fr);
}
.border-bottom{border-bottom: 1rpx solid #E8E8E8;
}
.border-left{border-left: 1rpx solid #E8E8E8;
}
.grid-row:last-child .grid-cell{border-bottom: none;
}
.amount:first-child{border-left: none;
}.returnDate .bottom {font-family: PingFangSC-Regular, PingFang SC;font-weight: 400;color: #666666;line-height: 22rpx;margin-top: 4rpx;
}
.tableInfo .amount {font-weight: 400;flex: auto;position: relative;
}
.tableInfo .totalAmount{width: 169rpx;height: 85rpx;text-align: center;
}.grid-container {display: grid;grid-template-columns: repeat(4, 1fr);border: 1rpx solid #E8E8E8;
}.grid-row {display: contents;
}.grid-cell {padding: 10rpx;border-bottom: 1rpx solid #E8E8E8;border-left: 1rpx solid #E8E8E8;height: 85rpx;text-align: center;
}.grid-cell:first-child {border-left: none;
}/* 动态合并行数的样式 */
.merge-cell-2 {grid-row: span 2;height: 170rpx;
}.merge-cell-3 {grid-row: span 3;height: 255rpx;
}.merge-cell-4 {grid-row: span 4;height: 340rpx;
}.hide-cell {display: none;
}