Element UI组件库合并table单元格函数封装
DOM:<el-table:data="tableData"size="mini"class="table"border:span-method="objectSpanMethod"><el-table-column label="优惠层级" prop="promoTypeName"></el-table-column><el-table-column label="优惠类型" prop="subPromoTypeName"></el-table-column><el-table-column label="优惠ID/活动名称" prop="promoName"></el-table-column><el-table-column prop="createPin" label="申请人ERP"></el-table-column><el-table-column label="优惠力度" prop="promoDegree"></el-table-column><el-table-column label="可用时间" prop="startTime"><templateslot-scope="scope"v-if="scope.row.startTime && scope.row.endTime">{{scope.row.startTime }} - {{scope.row.endTime }}</template></el-table-column><el-table-column label="优惠情况" prop="rewardPrice"></el-table-column></el-table>JS:getDetailData() {this.ajax({method: "get",url: `${this.$apiUrl.MONITOR.RISK_DETAIL}/${this.riskDetail.uuid}/${this.riskDetail.skuId}`,success: res => {this.tableData = res.data;this.handlerTable(res.data);},error: err => {console.log(err);}});},handlerTable(data) {this.spanArr = [];for (var i = 0; i < data.length; i++) {if (i === 0) {this.spanArr.push(1);this.pos = 0;} else {// 判断当前元素与上一个元素是否相同if (data[i].promoTypeName === data[i - 1].promoTypeName) {this.spanArr[this.pos] += 1;this.spanArr.push(0);} else {this.spanArr.push(1);this.pos = i;}}}},objectSpanMethod({row, column, rowIndex, columnIndex }) {if (columnIndex === 0) {//第0列const _row = this.spanArr[rowIndex];const _col = _row > 0 ? 1 : 0;return {// [0,0] 表示这一行不显示， [2,1]表示行的合并数rowspan: _row,colspan: _col};}}
