ng + zorro angular表格横纵向合并，横向目前是手动，纵向是自动合并，微调后可适配三大框架使用

表格横纵向合并，可以看一下代码编写之前和之后的样式，先上图~~

表格页面文件.html

<h1>正常表格</h1>
<nz-table #colSpanTable [nzData]="table03" nzBordered>
  <tbody>
    <tr *ngFor="let item of table03; index as i">
      <td>{{item.Project01}}</td>
      <td>{{item.Project02}}</td>
      <td>{{item.Project03}}</td>
      <td>{{item.Project04}}</td>
      <td>{{item.Project05}}</td>
    </tr>

  </tbody>
</nz-table>




<hr>
<br>


<h1>经过合并的表格</h1>
<h3>
  注意1： [nzData]="table01"必须为数组类型！！！！否则会报错core.js:6157 ERROR TypeError: object is not iterable (cannot read property
  Symbol(Symbol.iterator))
</h3>
<h3>
  注意2：&lt; th [colspan]="tableCol" &gt;是这样子写
</h3>
<h3>
  注意3：&lt; td [attr.colspan]="tableCol" &gt;是这样子写
  以上两者写法不一致，写的不对会失效
</h3>
<nz-table #colSpanTable [nzData]="table01" nzBordered>
  <thead>
    <tr>
      <th [colspan]="table01[0].arr.length + tableCol">{{table01[0].title}}</th>
    </tr>
    <tr>
      <th [colspan]="tableCol">Project</th>
      <th *ngFor="let item of table01[0].arr; index as i">{{item}}</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let item of table01[0].data; index as i">
      <td [attr.colspan]="tableCol">{{ item.ttt }}</td>
      <td *ngFor="let innerItem of item.Content;">{{innerItem.abc}}</td>
    </tr>
    <tr *ngFor="let item of table02; index as i">
      <ng-container *ngFor="let t of mergeColumns;">
        <ng-container *ngIf="item[t]!==undefined">
          <td [attr.rowspan]="item[mergeFix+t]">{{ item[t] }}</td>
        </ng-container>
      </ng-container>
      <td *ngFor="let name of notMergeColumns">{{item[name]}}</td>
    </tr>
  </tbody>
</nz-table>

表格页面文件.ts

import { Component, OnInit, ViewChild } from '@angular/core';
import { tableData1,tableData2 } from './mock.js'
@Component({
  selector: 'app-aa',
  templateUrl: './AA.component.html',
  styleUrls: ['./AA.component.less']
})
export class AAAAAComponent implements OnInit {
  tableCol = 3
  table01:Object
  table02:Array<Object>
  table03:Array<Object>
  tableData:any;
  mergeFix = 'mergeFlag'
  mergeColumns = ['Project01','Project02']; // 合并列的键值
  notMergeColumns = ['Project03','Project04','Project05','Project06','Project07']; // 合并列的键值
  ngOnInit(): void { 
    this.table01=tableData1
    this.table02=this.sortAndMerge(tableData2);
    this.table03=tableData2
  }
  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;
  }




}

数据文件mock.js

const tableData1 = [{
  title: '合并类型格式',
  arr: ['AAAAA', 'BBBBB', 'CCCCCC', 'DDDDD'],
  data: [
    {
      ttt: 'title01',
      Content: [
        {
          abc: 'ASWD01'
        },
        {
          abc: 'ASWD02'
        },
        {
          abc: 'ASWD03'
        },
        {
          abc: 'ASWD04'
        },
      ],
    },
    {
      ttt: 'title02',
      LeaderOrder: 1,
      Content: [
        {
          abc: 'ASWD01'
        },
        {
          abc: 'ASWD02'
        },
        {
          abc: 'ASWD03'
        },
        {
          abc: 'ASWD04'
        },
      ],
    },
  ],
}];
const tableData2 = [
	{
	key: '1',
	Project01: 'Project01_01',
	Project02: 'PPPPPPPP0101',
	Project03: 'Project03_011111',
	Project04: 'Project04_044444',
	Project05: 'Project05',
	Project06: 'Project06',
	Project07: 'Project07',
},
	{
	key: '2',
	Project01: 'Project01_01',
	Project02: 'PPPPPPPP0101',
	Project03: 'Project03_011111',
	Project04: 'Project04_044444',
	Project05: 'Project05',
	Project06: 'Project06',
	Project07: 'Project07',
},
	{
	key: '3',
	Project01: 'Project01_01',
	Project02: 'Project02_02',
	Project03: 'Project03_011111',
	Project04: 'Project04_044444',
	Project05: 'Project05',
	Project06: 'Project06',
	Project07: 'Project07',
},
	{
	key: '4',
	Project01: 'Project01_01',
	Project02: 'Project02_02',
	Project03: 'Project03_011111',
	Project04: 'Project04_044444',
	Project05: 'Project05',
	Project06: 'Project06',
	Project07: 'Project07',
},
	{
	key: '5',
	Project01: 'Project01_01',
	Project02: 'Project02_02',
	Project03: 'Project03_011111',
	Project04: 'Project04_044444',
	Project05: 'Project05',
	Project06: 'Project06',
	Project07: 'Project07',
},
]

export { tableData1, tableData2 };