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 propertySymbol(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: './ponent.html',styleUrls: ['./ponent.less']})export class AAAAAComponent implements OnInit {tableCol = 3table01:Objecttable02:Array<Object>table03:Array<Object>tableData:any;mergeFix = 'mergeFlag'mergeColumns = ['Project01','Project02']; // 合并列的键值notMergeColumns = ['Project03','Project04','Project05','Project06','Project07']; // 合并列的键值ngOnInit(): void { this.table01=tableData1this.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]) { //大于返回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++);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 };

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