Angular ng-zorro, 合并相同列数据

 先贴图为敬,

源码参考:

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