先贴图为敬,
源码参考:
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]) { //大于返回1 return 1; } else { //小于返回-1 return -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;//合并列属性默认为1 for (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
