1、根据返回的计费号相同的行数据,计费号前面的字段进行单元格合并,效果如下:
image.png
2. 代码层面如下:
// 加个:span-method="handleSpan"
<Table style="margin:15px 0;" :columns="columns" :data="tableData" :span-method="handleSpan"></Table>
methods: {
getList () {
this.tableData = this.getRowCol(_result.records);
},
/**
* 计算行列关系
*/
getRowCol (arr) {
if (this.tabsValue !== 'name1') {
return;
}
return arr.map((item, index) => {
item.colspan = 0
item.rowspan = 0
if (!item.isLoad) {
for (let i = index, len = arr.length; i < len; i++) {
if (item.billId !== arr[i].billId) {
break;
} else {
arr[i].isLoad = true
item.colspan = i - index + 1
item.rowspan = 1
}
}
}
return item
})
},
handleSpan ({ row, column, rowIndex, columnIndex }) {
if ([0, 1, 2, 3, 4].includes(columnIndex)) {
let o = {
colspan: row.rowspan,
rowspan: row.colspan
};
return o;
}
},
}