先贴图为敬,

源码参考:

import { Component } from '@angular/core';@Component({selector: 'nz-demo-table-colspan-rowspan',template: `<nz-table #colSpanTable [nzData]="tableData" nzBordered><thead><tr><th>Tel</th><th>Name</th><th>Age</th><th colspan="2">Home phone</th><th>Address</th></tr></thead><tbody><tr *ngFor="let data of colSpanTable.data; index as i"><ng-container *ngFor="let t of mergeColumns;"><ng-container *ngIf="data[t]!==undefined"><td [attr.rowspan]="data[rowspan+t]">{{ data[t] }}</td></ng-container></ng-container><td>{{ data.name }}</td><td>{{ data.age }}</td><td>{{ data.tel }}</td><td>{{ data.phone }}</td><td>{{ data.address }}</td></tr></tbody></nz-table>`
})
export class NzDemoTableColspanRowspanComponent {listOfData = [{key: '1',name: 'John Brown',age: 32,tel: '0571-22098909',phone: 18889898989,address: 'New York No. 1 Lake Park'},{key: '2',name: 'Jim Green',tel: '0571-22098333',phone: 18889898888,age: 42,address: 'London No. 1 Lake Park'},{key: '3',name: 'Joe Black',age: 32,tel: '0575-22098909A',phone: 18900010002,address: 'Sidney No. 1 Lake Park'},{key: '4',name: 'Jim Red',age: 18,tel: '0575-22098909A',phone: 18900010002,address: 'London No. 2 Lake Park'},{key: '5',name: 'Jake White',age: 18,tel: '0575-22098909',phone: 18900010002,address: 'Dublin No. 2 Lake Park'}];tableData:any;mergeColumns = ['tel'];ngOnInit(): void { this.tableData = this.sortAndMerge(this.listOfData);}private sortAndMerge(rawDataList): any[] {const rowspan = this.rowspan, mergeColumns = this.mergeColumns;if (rawDataList.length > 1) {//长度大于1才有资格进一步处理const sortColumn = Object.keys(rawDataList[0]),keySort = raw => {for (let i = raw.length - 1; i > 0; i--) {let newObj = {}, tmpObj = raw[i];sortColumn.forEach(s => newObj[s] = tmpObj[s]);raw[i] = newObj;}return raw;}, compare = (a, b, c = sortColumn[0], i = 0) => {if (a[c] === b[c]) { //等于的话进行判断是否还有后续字段需要排序，没有则返回0；有则递归进行后续字段排序处理。if (i === sortColumn.length - 1) {//没有后续字段return i = 0;}i++;return compare(a, b, sortColumn[i], i);//递归排序后续字段} else if (a[c] > b[c]) { //大于返回1return 1;} else { //小于返回-1return -1;}}, arr = keySort(JSON.parse(JSON.stringify(rawDataList))).sort(compare), aLen = arr.length;for (let i = mergeColumns.length - 1; i >= 0; i--) {//先迭代待合并列let index = 0;let title = mergeColumns[i];let span = 1;//合并列属性默认为1for (let j = 0; j < aLen; j++) {let comp = arr[index][title];if (arr[j][title] === comp) {j !== index && (delete arr[j][title], span++);j === aLen - 1 && (arr[index][rowspan + title] = span);} else {span > 1 && (arr[index][rowspan + title] = span, span = 1);index = j;}}}console.log(arr);return arr;}return rawDataList;}}

参考: 转载

https://stackblitz.com/run

https://blog.csdn.net/Areocrystal/article/details/102647405