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">
<template
slot-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) {
const _row = this.spanArr[rowIndex];
const _col = _row > 0 ? 1 : 0;
return {
rowspan: _row,
colspan: _col
};
}
}