表格代码
<el-table :data="tableData" border style="width: 100%" show-summary :summary-method="getSummaries"
:span-method="objectSpanMethod" :header-cell-style="setTitle">
<el-table-column prop="zb" align="center" label="组别" width="80" />
<el-table-column prop="pl" align="center" label="品类" width="280" />
<el-table-column prop="gmvmb" align="center" label="GMV目标" />
<el-table-column prop="gmvwc" align="center" label="GMV完成" />
<el-table-column prop="gmvgx" align="center" label="GMV贡献">
</el-table-column>
<el-table-column prop="gmvquekou" align="center" label="GMV缺口" />
<el-table-column prop="dzgmv" align="center" label="大宗GMV" />
<el-table-column prop="dzzb" align="center" label="大宗占比">
</el-table-column>
<el-table-column prop="zrgmv" align="center" label="自然GMV" />
<el-table-column prop="zrzb" align="center" label="自然占比" />
<el-table-column prop="zrddml" align="center" label="自然订单毛利" />
<el-table-column prop="rjgmvhb" align="center" label="日均GMV环比" />
<el-table-column prop="rjmlhb" align="center" label="日均毛利环比">
</el-table-column>
</el-table>
数据
methons:{
// 根据表格第一列的内容相同且上下相邻的的单元格进行合并
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
if (columnIndex === 0) { // 第一列
const prevRow = this.tableData[rowIndex - 1];
if (prevRow && row.zb === prevRow.zb) {
return {
rowspan: 0,
colspan: 1
};
} else {
let rowspan = 1;
for (let i = rowIndex + 1; i < this.tableData.length; i++) {
if (this.tableData[i].zb === row.zb) {
rowspan++;
} else {
break;
}
}
return {
rowspan,
colspan: 1
};
}
}
}
}
可以直接使用,tableData的数据格式和el-table的一样就可以直接复制使用