NG-ZORRO + angular-cli11 表格橫縱向單元格合並，按需設置背景色，解決動態合並單元格動態colspan情況下，nzLeft固定列失效問題，也適用VUE,REACT

NG-ZORRO + angular-cli11 實現表格橫縱向單元格合並，按需設置背景色，並解決動態合並單元格動態colspan情況下，nzLeft固定列失效問題

HTML代碼

<!-- 
  1.發現只要colspan只要是動態的，nzleft就不正常了，無法起作用 
  2.合並單元格且固定列位置方案1：比如標題，可以固定一部分，然后另外一部分不固定
  3.合並單元格且固定列位置方案2：可以動態設置其樣式
-->
<div class="my-table">

  <nz-table #colSpanTable  nzBordered
  [nzScroll]="{ x: (tableObj.arr.length+3)*95+'px', y: '240px' }" [nzFrontPagination]="false">
  <thead>
    <tr nzLeft>
      <!-- 方案1 -->
      <th colspan="3" nzLeft style="border-right: 0px">{{tableObj.ss}}</th>
      <th [colspan]="tableObj.arr.length"></th>
      <!-- 方案1 -->
    </tr>
    <tr>
      <th [colspan]="3" nzLeft id="my_hr_table_title">左側合並小標題</th>
      <th *ngFor="let item of tableObj.arr; index as i">{{item}}</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let item of tableData;">
      <td colspan="3" nzLeft>{{ item.type }}</td>
      <td *ngFor="let innerItem of item.Content;">{{innerItem.name}}</td>
    </tr>
    <tr *ngFor="let item of table02">
      <ng-container *ngFor="let t of mergeColumns; index as i">
        <ng-container *ngIf="item[t]!==undefined">
          <!-- 方案2 -->
          <td [attr.rowspan]="item[mergeFix+t]" class="ant-table-cell-fix-left" [style]="getStyle(i)">{{ item[t] }}
          </td>
          <!-- 方案2 -->
        </ng-container>
      </ng-container>
      <td class="ant-table-cell-fix-left" [style]="getStyle(2)">{{item.key03}}</td>
      <td *ngFor="let innerItem of item.Content" [ngClass]="getClass(innerItem.color)">{{innerItem.name}}</td>
    </tr>
  </tbody>
</nz-table>
</div>

TS 代碼

import { Component, OnInit } from '@angular/core'

@Component({
  selector: 'table-report',
  templateUrl: './table.component.html',
  styleUrls: ['./table.component.less'],
})
export class MyTableComponent implements OnInit {
  constructor() {}
  tableObj = {
    ss: '合並單元格的大標題',
    arr: ['item1', 'item13', 'item14', 'item107', 'item101', 'item102', 'item103', 'item104', 'item105', 'item106']
  }
  tableData = [
    {
      type: '橫向合並第一列',
      Content: [
        {
          name: 'ha11'
        },
        {
          name: 'ha12'
        },
        {
          name: 'ha13'
        },
        {
          name: 'ha14'
        },
        {
          name: 'ha15'
        },
        {
          name: 'ha16'
        },
        {
          name: 'ha17'
        },
        {
          name: 'ha18'
        },
        {
          name: 'ha19'
        },
        {
          name: 'ha20'
        },
      ]
    },
    {
      type: '橫向合並第2列',
      Content: [
        {
          name: 'ha11'
        },
        {
          name: 'ha12'
        },
        {
          name: 'ha13'
        },
        {
          name: 'ha14'
        },
        {
          name: 'ha15'
        },
        {
          name: 'ha16'
        },
        {
          name: 'ha17'
        },
        {
          name: 'ha18'
        },
        {
          name: 'ha19'
        },
        {
          name: 'ha20'
        }
      ]
    }
  ]
  table02: any = [];
  tableData2 = [
    {
      // 需要加上這一個東西
      key: '0',
      ll: '第三列01',
      LineMergerRow: 12,
      ss: '第三列02', // 需要加上這一個東西
      StationMergerRow: 3,
      key03: '第三列03', // 需要加上這一個東西
      ClassOrder: 1,
      Content: [
        {
          name: 'bottom01',
        },
        {
          name: 'bottom012',
        },
        {
          name: 'bottom013',
        },
        {
          name: 'bottom014',
        },
        {
          name: 'bottom015',
        },
        {
          name: 'bottom016',
        },
        {
          name: 'bottom017',
        },
        {
          name: 'bottom018',
        },
        {
          name: 'bottom019',
        },
        {
          name: 'bottom0120',
        },
      ],
    },
    {
      key: '2',
      ll: '根據LL自動合並的數據',
      LineMergerRow: 12,
      ss: 'CCC',
      StationMergerRow: 3,
      key03: '不需要合並',
      ClassOrder: 1,
      Content: [
        {
          name: 'color1',
          color: 1,
        },
        {
          name: 'color1',
          color: 2,
        },
        {
          name: 'color1',
          color: 3,
        },
        {
          name: 'color1',
          color: 4,
        },
        {
          name: 'color1',
          color: 4,
        },
        {
          name: 'color1',
          color: 1,
        },
        {
          name: 'color1',
          color: 2,
        },
        {
          name: 'color1',
          color: 3,
        },
        {
          name: 'color1',
          color: 4,
        },
        {
          name: 'color1',
          color: 4,
        },
      ],
    },
    {
      key: '3',
      ll: '根據LL自動合並的數據',
      LineMergerRow: 12,
      ss: '根據SS自動合並',
      StationMergerRow: 3,
      key03: '不需要合並',
      ClassOrder: 2,
      Content: [
        {
          name: 'color1',
          color: 0,
        },
        {
          name: 'color1',
          color: 1,
        },
        {
          name: 'color1',
          color: 2,
        },
        {
          name: 'color1',
          color: 3,
        },
        {
          name: 'color1',
          color: 4,
        },
        {
          name: 'color1',
          color: 4,
        },
        {
          name: 'color1',
          color: 3,
        },
        {
          name: 'color1',
          color: 0,
        },
        {
          name: 'color1',
          color: 2,
        },
        {
          name: 'color1',
          color: 0,
        },
      ],
    },

    {
      key: '4',
      ll: '根據LL自動合並的數據',
      LineMergerRow: 12,
      ss: '根據SS自動合並',
      StationMergerRow: 3,
      key03: '不需要合並3',
      ClassOrder: 3,
      Content: [
        {
          name: 'color1',
          color: 3,
        },
        {
          name: 'color1',
          color: 0,
        },
        {
          name: 'color1',
          color: 2,
        },
        {
          name: 'color1',
          color: 0,
        },
        {
          name: 'color1',
          color: 3,
        },
        {
          name: 'color1',
          color: 0,
        },
        {
          name: 'color1',
          color: 2,
        },
        {
          name: 'color1',
          color: 0,
        },
        {
          name: 'color1',
          color: 3,
        },
        {
          name: 'color1',
          color: 0,
        },
      ],
    },
  ];

  mergeFix = 'mergeFlag'
  mergeColumns = ['ll', 'ss']; // 合並列的鍵值
  ngOnInit(): void {
    this.table02 = this.sortAndMerge(this.tableData2);
  }

  /**
   * 自動合並單元格的方法
   * @param rawDataList 需要合並數據的數組
   */
  private sortAndMerge(rawDataList): any[] {
    const rowspan = this.mergeFix,
      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++);
            console.log(rowspan);
            j === aLen - 1 && (arr[index][rowspan + title] = span);
          } else {
            span > 1 && ((arr[index][rowspan + title] = span), (span = 1));
            index = j;
          }
        }
      }
      return arr;
    }
    return rawDataList;
  }
  getClass(e) {
    return { 0: 'col-green', 1: 'col-light-green', 2: 'col-orange', 3: 'col-red' }[e] || 'col-beautiful-green'
  }
  getStyle(e) {
    return (
      { 0: 'position: sticky; left: 0px;', 1: 'position: sticky; left: 95px;', 2: 'position: sticky; left: 190px;' }[e] ||
      'position: sticky; left: 0px;'
    );
  }
}

less 代碼

// 僅供測試階段使用
::ng-deep .alain-default__fixed .alain-default__aside {
  display: none;
}
::ng-deep .alain-default__content {
  margin-left: 20px;
}
// 僅供測試階段使用
.my-table {
  margin-top: 30px;
  color: rgb(0, 0, 0);
  // 減小間距
  /deep/.ant-table-thead > tr > th {
    padding-bottom: 5px;
    padding-top: 5px;
    color: rgb(0, 0, 0);
  }
  /deep/.ant-table-tbody > tr > td {
    padding: 5px 4px;
    color: rgb(0, 0, 0);
  }
  // 減小間距
  /deep/.ant-table {
    color: rgb(0, 0, 0);
}
  .col-green {
    background: green;
  }
  .col-light-green {
    background: rgb(185, 233, 185);
  }
  .col-orange {
    background: orange;
  }
  .col-red {
    background: red;
  }
  .col-beautiful-green {
    background: rgb(234, 250, 234);
  }
  .my_item {
    min-width: 600px;
    padding: 0 10px 0 10px;
    width: 50%;
    display: inline-block;
  }
}