table-rowspan

方案四（多列方案）

{"merge": [{"startRow": 0, "endRow": 1, "startCol": 4, "endCol": 4},{"startRow": 2, "endRow": 4, "startCol": 4, "endCol": 4},{"startRow": 0, "endRow": 4, "startCol": 3, "endCol": 3},{"startRow": 0, "endRow": 4, "startCol": 2, "endCol": 2},{"startRow": 5, "endRow": 6, "startCol": 4, "endCol": 4},{"startRow": 7, "endRow": 9, "startCol": 4, "endCol": 4},{"startRow": 5, "endRow": 9, "startCol": 3, "endCol": 3},{"startRow": 5, "endRow": 9, "startCol": 2, "endCol": 2},{"startRow": 0, "endRow": 9, "startCol": 1, "endCol": 1},{"startRow": 0, "endRow": 9, "startCol": 0, "endCol": 0}, {"startRow": 10, "endRow": 11, "startCol": 4, "endCol": 4},{"startRow": 12, "endRow": 13, "startCol": 4, "endCol": 4},{"startRow": 10, "endRow": 13, "startCol": 3, "endCol": 3},{"startRow": 10, "endRow": 13, "startCol": 2, "endCol": 2},{"startRow": 14, "endRow": 15, "startCol": 4, "endCol": 4},{"startRow": 14, "endRow": 15, "startCol": 3, "endCol": 3},{"startRow": 14, "endRow": 15, "startCol": 2, "endCol": 2},{"startRow": 10, "endRow": 15, "startCol": 1, "endCol": 1},{"startRow": 10, "endRow": 15, "startCol": 0, "endCol": 0}],"table": [{"row0col0": "WA全局重复性", "row0col1": "每日", "row0col2": "EPWARE-C1", "row0col3": "Time 2022-1-17 19:20", "row0col4": "RA1", "row0col5": "Z", "row0col6":"[-1,1]", "row0col7": "-5.611"},{"row0col0": "WA全局重复性", "row0col1": "每日", "row0col2": "EPWARE-C1", "row0col3": "Time 2022-1-17 19:20", "row0col4": "RA1", "row0col5": "Z", "row0col6":"[-1,1]", "row0col7": "-5.611"},{"row0col0": "WA全局重复性", "row0col1": "每日", "row0col2": "EPWARE-C1", "row0col3": "Time 2022-1-17 19:20", "row0col4": "RA2", "row0col5": "Z", "row0col6":"[-1,1]", "row0col7": "-5.611"},{"row0col0": "WA全局重复性", "row0col1": "每日", "row0col2": "EPWARE-C1", "row0col3": "Time 2022-1-17 19:20", "row0col4": "RA2", "row0col5": "Z", "row0col6":"[-1,1]", "row0col7": "-5.611"},{"row0col0": "WA全局重复性", "row0col1": "每日", "row0col2": "EPWARE-C1", "row0col3": "Time 2022-1-17 19:20", "row0col4": "RA2", "row0col5": "Z", "row0col6":"[-1,1]", "row0col7": "-5.611"},{"row0col0": "WA全局重复性", "row0col1": "每日", "row0col2": "EPWARE-C2", "row0col3": "Time 2022-2-17 19:20", "row0col4": "RA1", "row0col5": "Z", "row0col6":"[-1,1]", "row0col7": "-5.611"},{"row0col0": "WA全局重复性", "row0col1": "每日", "row0col2": "EPWARE-C2", "row0col3": "Time 2022-2-17 19:20", "row0col4": "RA1", "row0col5": "Z", "row0col6":"[-1,1]", "row0col7": "-5.611"},{"row0col0": "WA全局重复性", "row0col1": "每日", "row0col2": "EPWARE-C2", "row0col3": "Time 2022-2-17 19:20", "row0col4": "RA2", "row0col5": "Z", "row0col6":"[-1,1]", "row0col7": "-5.611"},{"row0col0": "WA全局重复性", "row0col1": "每日", "row0col2": "EPWARE-C2", "row0col3": "Time 2022-2-17 19:20", "row0col4": "RA2", "row0col5": "Z", "row0col6":"[-1,1]", "row0col7": "-5.611"},{"row0col0": "WA全局重复性", "row0col1": "每日", "row0col2": "EPWARE-C2", "row0col3": "Time 2022-2-17 19:20", "row0col4": "RA2", "row0col5": "Z", "row0col6":"[-1,1]", "row0col7": "-5.611"},{"row0col0": "FLS全局重复性", "row0col1": "每日", "row0col2": "EPWARE-C1", "row0col3": "Time 2022-1-17 19:20", "row0col4": "RA1", "row0col5": "Z", "row0col6":"[-1,1]", "row0col7": "-5.611"},{"row0col0": "FLS全局重复性", "row0col1": "每日", "row0col2": "EPWARE-C1", "row0col3": "Time 2022-1-17 19:20", "row0col4": "RA1", "row0col5": "Z", "row0col6":"[-1,1]", "row0col7": "-5.611"},{"row0col0": "FLS全局重复性", "row0col1": "每日", "row0col2": "EPWARE-C1", "row0col3": "Time 2022-1-17 19:20", "row0col4": "RA2", "row0col5": "Z", "row0col6":"[-1,1]", "row0col7": "-5.611"},{"row0col0": "FLS全局重复性", "row0col1": "每日", "row0col2": "EPWARE-C1", "row0col3": "Time 2022-1-17 19:20", "row0col4": "RA2", "row0col5": "Z", "row0col6":"[-1,1]", "row0col7": "-5.611"},{"row0col0": "FLS全局重复性", "row0col1": "每日", "row0col2": "EPWARE-C2", "row0col3": "Time 2022-1-17 19:20", "row0col4": "RA1", "row0col5": "Z", "row0col6":"[-1,1]", "row0col7": "-5.611"} ,{"row0col0": "FLS全局重复性", "row0col1": "每日", "row0col2": "EPWARE-C2", "row0col3": "Time 2022-1-17 19:20", "row0col4": "RA1", "row0col5": "Z", "row0col6":"[-1,1]", "row0col7": "-5.611"} ]
}

<table border="1"><thead><th>level1</th><th>level2</th><th>level3</th><th>level4</th><th>level5</th><th>level6</th><th>level7</th><th>level8</th></thead><tbody><ng-container *ngFor="let trs of tableViewData "><tr *ngFor="let item of trs"><td [attr.rowspan]="item?.rowspan0" *ngIf="item?.rowspan0">{{item.level1}}</td><td [attr.rowspan]="item?.rowspan1" *ngIf="item?.rowspan1">{{item.level2}}</td><td [attr.rowspan]="item?.rowspan2" *ngIf="item?.rowspan2">{{item.level3}}</td><td [attr.rowspan]="item?.rowspan3" *ngIf="item?.rowspan3">{{item.level4}}</td><td [attr.rowspan]="item?.rowspan4" *ngIf="item?.rowspan4">{{item.level5}}</td><td>{{item.level6}}</td><td>{{item.level7}}</td><td  [ngStyle]="{'color': item?.isWarning?'red': ''}">{{item.level8}}</td></tr></ng-container></tbody>
</table>

ngOnInit():void{this.getTableData();}tableViewData:any = [];getTableData() {this.http.get('../assets/jsons/test.json').subscribe((data:any) => {this.transferTableData(data.table, data.merge);});}transferTableData(table:any, merge:any) {let tableArray:Array<TableColumn> = [];table.forEach((item: any) => {const keysArr =  Object.keys(item);tableArray.push({level1: item[keysArr[0]],level2: item[keysArr[1]],level3: item[keysArr[2]],level4: item[keysArr[3]],level5: item[keysArr[4]],level6: item[keysArr[5]],level7: item[keysArr[6]],level8: item[keysArr[7]],isWarning: true});});merge.forEach((item:any) => {const rowspanData = item.endRow - item.startRow +  1;if (item.startCol === 4 && item.endCol === 4) {tableArray[item.startRow].rowspan4 = rowspanData;} else if(item.startCol === 3 && item.endCol === 3) {tableArray[item.startRow].rowspan3 = rowspanData;} else if(item.startCol === 2 && item.endCol === 2) {tableArray[item.startRow].rowspan2 = rowspanData;} else if(item.startCol === 1 && item.endCol === 1) {tableArray[item.startRow].rowspan1 = rowspanData;} else if(item.startCol === 0 && item.endCol === 0) {tableArray[item.startRow].rowspan0 = rowspanData;this.tableViewData.push(cloneDeep(tableArray).splice(item.startRow, rowspanData));}});console.log( this.tableViewData);}

方案三（爆红和时间列）


<!--step 3-->
<h3>step 3</h3>
<button (click)="timeChange()"> test clear</button>
<table border="1"><thead><th>level1</th><th>level2</th><th>level3</th><th>level4</th><th>level5</th><th>level6</th><th>level7</th></thead><tbody><ng-container *ngFor="let trsItem of tableViewData; let i = index;"><tr><td [attr.rowspan]="tableViewData[i].totalRow">{{tableFirstRowViews[i].tr1?.level1}}</td><td [attr.rowspan]="tableViewData[i].totalRow">{{tableFirstRowViews[i].tr1?.level2}}</td><td [attr.rowspan]="tableFirstRowViews[i].tr1?.endRow - tableFirstRowViews[i].tr1?.startRow + 1">{{tableFirstRowViews[i].tr1?.level3}}</td><td  [attr.rowspan]="tableFirstRowViews[i].tr1?.endRow - tableFirstRowViews[i].tr1?.startRow + 1">{{tableFirstRowViews[i].tr1?.level4}}</td><td>{{tableFirstRowViews[i].tr1?.level5}}</td><td>{{tableFirstRowViews[i].tr1?.level6}}</td><td [ngStyle]="{'color': tableFirstRowViews[i].tr1?.isWarning?'red': ''}">{{tableFirstRowViews[i].tr1?.level7}}</td></tr><tr *ngFor="let tableFirstRowViewsItme of tableFirstRowViews[i].otherTrs"><!-- <td >{{tableFirstRowViewsItme.level4}}</td> --><td>{{tableFirstRowViewsItme.level5}}</td><td>{{tableFirstRowViewsItme.level6}}</td><td [ngStyle]="{'color': tableFirstRowViewsItme.isWarning?'red': ''}">{{tableFirstRowViewsItme.level7}}</td></tr><ng-container *ngFor="let otherTrsItem of tableOtherRowsViews[i]"><tr><td [attr.rowspan]="otherTrsItem.tr1?.endRow - otherTrsItem.tr1?.startRow + 1">{{otherTrsItem.tr1.level3}}</td><td [attr.rowspan]="otherTrsItem.tr1?.endRow - otherTrsItem.tr1?.startRow + 1">{{otherTrsItem.tr1.level4}}</td><td>{{otherTrsItem.tr1.level5}}</td><td>{{otherTrsItem.tr1.level6}}</td><td [ngStyle]="{'color': otherTrsItem.tr1.isWarning?'red': ''}">{{otherTrsItem.tr1.level7}}</td></tr><tr *ngFor="let tableOtherRowsViewsItem of otherTrsItem.otherTrs"><!-- <td>{{tableOtherRowsViewsItem.level4}}</td> --><td>{{tableOtherRowsViewsItem.level5}}</td><td>{{tableOtherRowsViewsItem.level6}}</td><td [ngStyle]="{'color': tableOtherRowsViewsItem.isWarning?'red': ''}">{{tableOtherRowsViewsItem.level7}}</td></tr></ng-container></ng-container></tbody>
</table>

import { Component, OnInit, Input, OnChanges, forwardRef } from '@angular/core';
import { TrackChanges } from 'src/app/core/learn-decorator';
import { AppComponent } from 'src/app/app.component';
import { cloneDeep } from 'lodash';
import { HttpClient } from '@angular/common/http';@Component({selector: 'app-child',templateUrl: './child.component.html',styleUrls: ['./child.component.less'],providers:[{provide: AppComponent, useExisting: forwardRef(() => ChildComponent)}]
})
export class ChildComponent  {constructor(private http: HttpClient) {}ngOnInit():void{this.getTableData();}tableViewData:any = [];getTableData() {// this.http.get('../assets/jsons/test.json').subscribe((data:any) => {// this.tableViewData = data;const res = {"merge": [{"startRow": 0, "endRow": 2, "startCol": 3, "endCol": 3},{"startRow": 3, "endRow": 4, "startCol": 3, "endCol": 3},{"startRow": 0, "endRow": 2, "startCol": 2, "endCol": 2},{"startRow": 3, "endRow": 4, "startCol": 2, "endCol": 2},{"startRow": 0, "endRow": 4, "startCol": 1, "endCol": 1},{"startRow": 0, "endRow": 4, "startCol": 0, "endCol": 0},  //  0-4为一组，知道每组total值 endRow - startRow + 1{"startRow": 5, "endRow": 6, "startCol": 3, "endCol": 3},{"startRow": 7, "endRow": 7, "startCol": 3, "endCol": 3},{"startRow": 5, "endRow": 6, "startCol": 2, "endCol": 2},{"startRow": 7, "endRow": 7, "startCol": 2, "endCol": 2},{"startRow": 5, "endRow": 7, "startCol": 1, "endCol": 1},{"startRow": 5, "endRow": 7, "startCol": 0, "endCol": 0}],"table": [{"row0col0": "WA全局重复性", "row0col1": "每日", "row0col2": "EPWARE-C1", "row0col3": "Time 2021-06", "row0col4": "Rotation", "row0col5": "<=20.6nm", "row0col6": "9.06"},{"row0col0": "WA全局重复性", "row0col1": "每日", "row0col2": "EPWARE-C1", "row0col3": "Time 2021-06", "row1col4": "x", "row1col5": "<=20.0nm", "row1col6": "9.06"},{"row0col0": "WA全局重复性", "row0col1": "每日", "row0col2": "EPWARE-C1", "row0col3": "Time 2021-06", "row2col4": "y", "row2col5": "<=20.6nm", "row2col6": "30.8"},{"row0col0": "WA全局重复性", "row0col1": "每日", "row3col2": "EPWARE-C2", "row0col3": "Time 2021-08", "row3col4": "Rotation", "row3col5": "<=20.0nm", "row3col6": "9.06"},{"row0col0": "WA全局重复性", "row0col1": "每日", "row3col2": "EPWARE-C2", "row0col3": "Time 2021-08", "row4col4": "x", "row4col5": "<=20.0nm", "row4col6": "9.06"},{"row5col0": "FLS全局重复性", "row5col1": "每日", "row5col2": "EPWARE-C1", "row0col3": "Time 2021-06", "row5col4": "Rotation", "row5col5": "<=20.0nm", "row5col6": "9.06"},{"row5col0": "FLS全局重复性", "row5col1": "每日", "row5col2": "EPWARE-C1", "row0col3": "Time 2021-06", "row6col4": "x", "row6col5": "<=20.1nm", "row6col6": "9.06"},{"row5col0": "FLS全局重复性", "row5col1": "每日", "row6col2": "EPWARE-C2", "row0col3": "Time 2021-08", "row7col4": "Rotation", "row7col5": "<=20.0nm", "row7col6": "26.2"}]};this.tableViewData = this.transferTableData(res.table, res.merge);this.getMergeCellList();// })}transferTableData(table:any, merge:any) {let tableArray:any = [];table.forEach((item: any, index:number) => {const keysArr =  Object.keys(item);console.log(keysArr);const numArr = item[keysArr[5]].match(/\d+\.\d+/g);// const numArr2 = item[keysArr[5]].match(/\d+/g)  整数截取console.log(numArr[0]);tableArray.push({level1: item[keysArr[0]],level2: item[keysArr[1]],level3: item[keysArr[2]],level4: item[keysArr[3]],level5: item[keysArr[4]],level6: item[keysArr[5]],level7: item[keysArr[6]],isWarning: Number.parseFloat(item[keysArr[6]]) <= numArr[0]?false:true});});let totalRowsArray:any = [];merge.forEach((item:any) => {if(item.startCol === 0 && item.endCol === 0) {totalRowsArray.push(item);} else {if (item.startCol !== 1 && item.endCol !== 1) {Object.assign(tableArray[item.startRow], item)}}});let tableViews:any = [];totalRowsArray.forEach((item:any) => {const sum = item.endRow - item.startRow +  1;tableViews.push({data: cloneDeep(tableArray).splice(item.startRow, sum),totalRow: sum,})});console.log(tableViews);return tableViews;}getMergeCellList() {this.tableViewData.forEach((item:any) => {this.getTableFirstRowView(cloneDeep(item.data));});console.log(this.tableFirstRowViews);console.log(this.tableOtherRowsViews);console.log(this.tableViewData);}tableFirstRowView: any= {tr1: {},otherTrs:[]};tableOtherRowsView:Array<{tr1:any, otherTrs:Array<any>}> = [];tableFirstRowViews: any = [];tableOtherRowsViews:any = [];initTableData() {this.tableViewData = [];this.tableFirstRowView = {tr1: {},otherTrs:[]}this.tableOtherRowsView = [];this.tableFirstRowViews = [];this.tableOtherRowsViews = [];}getTableFirstRowView(data:any) {const data1Clone = cloneDeep(data);const data2Clone = cloneDeep(data);const data3Clone = cloneDeep(data);const sum = data[0].endRow - data[0].startRow;this.tableFirstRowView = {tr1: data[0],otherTrs: data1Clone.splice(1,sum)};this.tableFirstRowViews.push(this.tableFirstRowView);this.getTableOthersRowView(data2Clone.splice(sum + 1, data.length), data3Clone);}getTableOthersRowView(data:any, originData:any) {this.tableOtherRowsView = [];data.forEach((item:any) => {let copyOriginData =  cloneDeep(originData);if(item?.startRow) {this.tableOtherRowsView.push({tr1: item,otherTrs: copyOriginData.splice(item.startRow + 1, item.endRow - item.startRow + 1)})}})this.tableOtherRowsViews.push(this.tableOtherRowsView);}timeChange() {this.initTableData();this.getTableData();}
}

方案一（前端平铺数据）

import { Component, OnInit } from '@angular/core';
import { NzMessageService } from 'ng-zorro-antd/message';import { WelcomeService } from './services/welcome.service';import * as _ from 'lodash';import { LoadingService } from 'src/app/core/loading/loading.service';import { TableColumnName } from './models/test';
import { cloneDeep } from 'lodash';export interface VirtualDataInterface {index: number;name: string;age: number;address: string;
}
@Component({selector: 'app-welcome',templateUrl: './welcome.component.html',styleUrls: ['./welcome.component.less']
})
export class WelcomeComponent implements OnInit{constructor(private welcomeService: WelcomeService,private nzMessageService: NzMessageService,private loadingService: LoadingService) { }ngOnInit() {this.getTableData();}tableData:Array<any> = [];totalChilds: Array<any> = [];totalChild:any = {level1Value: [],level2Value: [],level3Value: [],level4Value: [],level5Value: [],level6Value: [],}getTableData() {this.welcomeService.geTableDetails().subscribe((res:any) => {this.transferTableData(res);});}tableViewData:Array<any> = [];totalTableValue: any = [];transferTableData(res:any) {let count = 0;let arr:any = [];res.forEach((level1Item:any) => {arr = [];this.totalChild = {level1Value: [],level2Value: [],level3Value: [],level4Value: [],level5Value: [],level6Value: [],}level1Item.row = (level1Item.data || []).length;this.totalChild.level1Value =   this.totalChild.level1Value.concat(res);(level1Item.data || []).forEach((level2Item:any) => {level2Item.row = (level2Item.data || []).length;this.totalChild.level2Value =  this.totalChild.level2Value.concat(level2Item);( level2Item.data || []).forEach((level3Item: any) => {level3Item.row = (level3Item.data || []).length;this.totalChild.level3Value =   this.totalChild.level3Value.concat(level3Item);(level3Item.data || []).forEach((level4Item:any) => {level4Item.row = (level4Item.data || []).length;this.totalChild.level4Value =   this.totalChild.level4Value.concat(level4Item);(level4Item.data || []).forEach((level5Item:any) => {level5Item.row = (level5Item.data || []).length;this.totalChild.level5Value =   this.totalChild.level5Value.concat(level5Item);(level5Item.data || []).forEach((level6Item:any) => {level6Item.row = ((level6Item.data) || []).length;this.totalChild.level6Value =   this.totalChild.level6Value.concat(level6Item);arr.push({level1Value: level1Item.name,level2Value: level2Item.name,level3Value: level3Item.name,level4Value: level4Item.name,level5Value: level5Item.name,level6Value: level6Item.name,tr: count});this.totalTableValue.push({level1Value: level1Item.name,level2Value: level2Item.name,level3Value: level3Item.name,level4Value: level4Item.name,level5Value: level5Item.name,level6Value: level6Item.name,tr: count})})})});});});count++;this.tableViewData.push(arr);this.totalChilds.push(this.totalChild);});this.tableViewData.forEach((item:any, index: number) => {this.getTableMap(index);this.getMergeLevel3Cell(index);this.getTableFirstRowView(cloneDeep(item));});console.log(this.tableViewData);console.log(this.totalTableValue)console.log(this.tableFirstRowViews);console.log(this.tableOtherRowsViews);}tableMap:any = new Map();tableMapArray:any = [];getTableMap(index:number) {this.tableMap['level1Value'] = {totalChildCount:this.totalChilds[index].level1Value.length, tatalChildValue: this.totalChilds[index].level1Value};this.tableMap['level2Value'] = {totalChildCount:this.totalChilds[index].level2Value.length, tatalChildValue: this.totalChilds[index].level2Value};this.tableMap['level3Value'] = {totalChildCount:this.totalChilds[index].level3Value.length, tatalChildValue: this.totalChilds[index].level3Value};this.tableMap['level4Value'] = {totalChildCount:this.totalChilds[index].level4Value.length, tatalChildValue: this.totalChilds[index].level4Value};this.tableMap['level5Value'] = {totalChildCount:this.totalChilds[index].level5Value.length, tatalChildValue: this.totalChilds[index].level5Value};this.tableMap['level6Value'] = {totalChildCount:this.totalChilds[index].level6Value.length, tatalChildValue: this.totalChilds[index].level6Value};this.tableMapArray.push(this.tableMap);}getMergeLevel3Cell(index:number) {let sumRow = 0;let maxLength  = this.tableMapArray[index]['level3Value'].tatalChildValue.length - 1;this.tableViewData[index][0].level3Col = this.tableMapArray[index]['level3Value'].tatalChildValue[0].row;this.tableViewData[index][0].startIndex = 0;this.tableViewData[index][0].endIndex = this.tableMapArray[index]['level3Value'].tatalChildValue[0].row - 1;this.tableMapArray[index]['level3Value'].tatalChildValue.forEach((item:any, ind: number) => {if (ind < maxLength ) {sumRow = sumRow + item.row;this.tableViewData[index][sumRow].level3Col =  item.row;this.tableViewData[index][sumRow].startIndex = sumRow;this.tableViewData[index][sumRow].endIndex = sumRow + item.row - 1;}});}tableFirstRowView: any= {tr1: {},otherTrs:[]};tableOtherRowsView:Array<{tr1:any, otherTrs:Array<any>}> = [];tableFirstRowViews: any = [];tableOtherRowsViews:any = [];getTableFirstRowView(data:any) {const data1Clone = cloneDeep(data);const data2Clone = cloneDeep(data);const data3Clone = cloneDeep(data);this.tableFirstRowView = {tr1: data[0],otherTrs: data1Clone.splice(1,data[0].level3Col - 1)};this.tableFirstRowViews.push(this.tableFirstRowView);this.getTableOthersRowView(data2Clone.splice(data[0].level3Col, data.length), data3Clone);}getTableOthersRowView(data:any, originData:any) {this.tableOtherRowsView = [];data.forEach((item:any) => {let copyOriginData =  cloneDeep(originData);if(item?.level3Col) {this.tableOtherRowsView.push({tr1: item,otherTrs: copyOriginData.splice(item.startIndex + 1, item.level3Col - 1)})}})this.tableOtherRowsViews.push(this.tableOtherRowsView);}}

html

<section id="welcome-page-section"><nz-table #colSpanTable [nzTemplateMode]="true" [nzData]="totalTableValue" nzBordered><thead><tr><th>level1Value</th><th>level2Value</th><th>level3Value</th><th>level4Value</th><th>level5Value</th><th>level6Value</th></tr></thead><tbody><ng-container *ngFor="let moreRowItem  of tableViewData; let i = index;" ><tr><td [attr.rowspan]="tableViewData[i].length">{{tableFirstRowViews[i]?.tr1.level1Value}}</td><td [attr.rowspan]="tableViewData[i].length">{{tableFirstRowViews[i]?.tr1.level2Value}}</td><td [attr.rowspan]="tableFirstRowViews[i]?.tr1.level3Col">{{tableFirstRowViews[i]?.tr1.level3Value}}</td><td>{{tableFirstRowViews[i]?.tr1.level4Value}}</td><td>{{tableFirstRowViews[i]?.tr1.level5Value}}</td><td>{{tableFirstRowViews[i]?.tr1.level6Value}}</td></tr><tr *ngFor="let item of tableFirstRowViews[i]?.otherTrs"><!-- <td>{{item.leve1}}</td><td >{{item.level2}}</td> --><!-- <td *ngIf="item?.row">{{item.level3}}</td> --><td>{{item.level4Value}}</td><td>{{item.level5Value}}</td><td>{{item.level6Value}}</td></tr><ng-container *ngFor="let itemtr of tableOtherRowsViews[i]"><tr><!-- <td>{{itemtr.tr1.leve1}}</td><td>{{itemtr.tr1.level2}}</td> --><td [attr.rowspan]="itemtr.tr1.level3Col">{{itemtr.tr1.level3Value}}</td><td>{{itemtr.tr1.level4Value}}</td><td>{{itemtr.tr1.level5Value}}</td><td>{{itemtr.tr1.level6Value}}</td></tr><tr *ngFor="let trs of itemtr.otherTrs"><!-- <td>{{trs.leve1}}</td><td >{{trs.level2}}</td> --><!-- <td>{{trs.level3}}</td> --><td>{{trs.level4Value}}</td><td>{{trs.level5Value}}</td><td>{{trs.level6Value}}</td></tr></ng-container></ng-container></tbody></nz-table></section>

方案二：

import { Component, OnInit } from '@angular/core';
import {  empty, from, generate, interval, map, never, Observable, Observer, of, range, repeat, timer } from 'rxjs';
import { concat, concatAll, merge, take } from 'rxjs/operators';
import { RxjsService } from './services/rxjs.service';
import { cloneDeep } from 'lodash';
import { HttpClient } from '@angular/common/http';@Component({selector: 'app-root',templateUrl: './app.component.html',styleUrls: ['./app.component.css']
})export class AppComponent implements OnInit {constructor(private rxjsService:RxjsService,private http: HttpClient) {}ngOnInit():void{this.getTableData();}tableViewData:any = [];getTableData() {this.http.get('../assets/jsons/test.json').subscribe((data:any) => {// this.tableViewData = data;const res = {"merge": [{"startRow": 0, "endRow": 2, "startCol": 2, "endCol": 2},{"startRow": 3, "endRow": 4, "startCol": 2, "endCol": 2},{"startRow": 0, "endRow": 4, "startCol": 1, "endCol": 1},{"startRow": 0, "endRow": 4, "startCol": 0, "endCol": 0},  //  0-4为一组，知道每组total值 endRow - startRow + 1{"startRow": 5, "endRow": 6, "startCol": 2, "endCol": 2},{"startRow": 7, "endRow": 7, "startCol": 2, "endCol": 2},{"startRow": 5, "endRow": 7, "startCol": 1, "endCol": 1},{"startRow": 5, "endRow": 7, "startCol": 0, "endCol": 0}],"table": [{"row0col0": "WA全局重复性", "row0col1": "每日", "row0col2": "EPWARE-C1", "row0col3": "Rotation", "row0col4": "<=20nm", "row0col5": "9.06"},{"row0col0": "WA全局重复性", "row0col1": "每日", "row0col2": "EPWARE-C1", "row1col3": "x", "row1col4": "<=20nm", "row1col5": "9.06"},{"row0col0": "WA全局重复性", "row0col1": "每日", "row0col2": "EPWARE-C1", "row2col3": "y", "row2col4": "<=20nm", "row2col5": "9.06"},{"row0col0": "WA全局重复性", "row0col1": "每日", "row3col2": "EPWARE-C2", "row3col3": "Rotation", "row3col4": "<=20nm", "row3col5": "9.06"},{"row0col0": "WA全局重复性", "row0col1": "每日", "row3col2": "EPWARE-C2", "row4col3": "x", "row4col4": "<=20nm", "row4col5": "9.06"},{"row5col0": "FLS全局重复性", "row5col1": "每日", "row5col2": "EPWARE-C1", "row5col3": "Rotation", "row5col4": "<=20nm", "row5col5": "9.06"},{"row5col0": "FLS全局重复性", "row5col1": "每日", "row5col2": "EPWARE-C1", "row6col3": "x", "row6col4": "<=20nm", "row6col5": "9.06"},{"row5col0": "FLS全局重复性", "row5col1": "每日", "row6col2": "EPWARE-C2", "row7col3": "Rotation", "row7col4": "<=20nm", "row7col5": "9.06"}]};this.tableViewData = this.transferTableData(res.table, res.merge);this.getMergeCellList();})}transferTableData(table:any, merge:any) {let tableArray:any = [];table.forEach((item: any, index:number) => {const keysArr =  Object.keys(item);console.log(keysArr);tableArray.push({level1: item[keysArr[0]],level2: item[keysArr[1]],level3: item[keysArr[2]],level4: item[keysArr[3]],level5: item[keysArr[4]],level6: item[keysArr[5]],});});let totalRowsArray:any = [];merge.forEach((item:any) => {if(item.startCol === 0 && item.endCol === 0) {totalRowsArray.push(item);} else {if (item.startCol !== 1 && item.endCol !== 1) {Object.assign(tableArray[item.startRow], item)}}});let tableViews:any = [];totalRowsArray.forEach((item:any) => {const sum = item.endRow - item.startRow +  1;tableViews.push({data: cloneDeep(tableArray).splice(item.startRow, sum),totalRow: sum,})});return tableViews;}getMergeCellList() {this.tableViewData.forEach((item:any) => {this.getTableFirstRowView(cloneDeep(item.data));});console.log(this.tableFirstRowViews);console.log(this.tableOtherRowsViews);console.log(this.tableViewData);}tableFirstRowView: any= {tr1: {},otherTrs:[]};tableOtherRowsView:Array<{tr1:any, otherTrs:Array<any>}> = [];tableFirstRowViews: any = [];tableOtherRowsViews:any = [];initTableData() {this.tableViewData = [];this.tableFirstRowView = {tr1: {},otherTrs:[]}this.tableOtherRowsView = [];this.tableFirstRowViews = [];this.tableOtherRowsViews = [];}getTableFirstRowView(data:any) {const data1Clone = cloneDeep(data);const data2Clone = cloneDeep(data);const data3Clone = cloneDeep(data);const sum = data[0].endRow - data[0].startRow;this.tableFirstRowView = {tr1: data[0],otherTrs: data1Clone.splice(1,sum)};this.tableFirstRowViews.push(this.tableFirstRowView);this.getTableOthersRowView(data2Clone.splice(sum + 1, data.length), data3Clone);}getTableOthersRowView(data:any, originData:any) {this.tableOtherRowsView = [];data.forEach((item:any) => {let copyOriginData =  cloneDeep(originData);if(item?.startRow) {this.tableOtherRowsView.push({tr1: item,otherTrs: copyOriginData.splice(item.startRow + 1, item.endRow - item.startRow + 1)})}})this.tableOtherRowsViews.push(this.tableOtherRowsView);}timeChange() {this.initTableData();this.getTableData();}
}


<!--step 3-->
<h3>step 3</h3>
<button (click)="timeChange()"> test clear</button>
<table border="1"><thead><th>level1</th><th>level2</th><th>level3</th><th>level4</th><th>level5</th><th>level6</th></thead><tbody><ng-container *ngFor="let trsItem of tableViewData; let i = index;"><tr><td [attr.rowspan]="tableViewData[i].totalRow">{{tableFirstRowViews[i].tr1?.level1}}</td><td [attr.rowspan]="tableViewData[i].totalRow">{{tableFirstRowViews[i].tr1?.level2}}</td><td [attr.rowspan]="tableFirstRowViews[i].tr1?.endRow - tableFirstRowViews[i].tr1?.startRow + 1">{{tableFirstRowViews[i].tr1?.level3}}</td><td>{{tableFirstRowViews[i].tr1?.level4}}</td><td>{{tableFirstRowViews[i].tr1?.level5}}</td><td>{{tableFirstRowViews[i].tr1?.level6}}</td></tr><tr *ngFor="let tableFirstRowViewsItme of tableFirstRowViews[i].otherTrs"><td>{{tableFirstRowViewsItme.level4}}</td><td>{{tableFirstRowViewsItme.level5}}</td><td>{{tableFirstRowViewsItme.level6}}</td></tr><ng-container *ngFor="let otherTrsItem of tableOtherRowsViews[i]"><tr><td [attr.rowspan]="otherTrsItem.tr1?.endRow - otherTrsItem.tr1?.startRow + 1">{{otherTrsItem.tr1.level3}}</td><td>{{otherTrsItem.tr1.level4}}</td><td>{{otherTrsItem.tr1.level5}}</td><td>{{otherTrsItem.tr1.level6}}</td></tr><tr *ngFor="let tableOtherRowsViewsItem of otherTrsItem.otherTrs"><td>{{tableOtherRowsViewsItem.level4}}</td><td>{{tableOtherRowsViewsItem.level5}}</td><td>{{tableOtherRowsViewsItem.level6}}</td></tr></ng-container></ng-container></tbody>
</table>

table-rowspan相关推荐

csstable跨列居中_HTML基础 table rowspan colspan 跨行与跨列的单元格
OS : Windows 10 browser : Chrome 83.0.4103.116 editor : Visual Studio Code 1.46.1 typesetting : Mark ...
html的table属性笔记
<table cellpadding="10px" border="1px" cellspacing="5px"><!-- ...
HTML实现表格rowspan、colspan操作
前言今天领导安排个任务,将报告的某个功能界面动态化展示,其中有涉及到 Table 表格操作(rowspan.colspan),刚刚开始对这两概念不是很理解,走了很多弯路-扯远了,开始吧. 一.概念 ...
一些关于iText和iTextSharp的旧闻(some old news about iText and iTextSharp)
Google Calendar使用iText来输出PDF(iText used in Google Calendar) The calendars are generated as PDF files ...
python_day12_html
1: html是什么 2: head标签 3: body标签 4: 超链接标签<a half>,<img> 5: 列表标签 <ol>,<ul>,&l ...
HTML中表格和表单的简单构造和样式
现在一般网页上都有表单,也有表格,但是少. 表格在HTML网页上建立表格需要有<table>标签 <table>标签中有主要标签有<tr>表格行.<th&g ...
Java web学习记载
我的记载是关于html文件的,jsp还没有学. 这个是注释的方法  这个是字体的大小调节,从上到下字体减小 <h1>你好啊</h1> < ...
Web前端学习win11
Web前端学习win11 一.第一部分 1.1什么是HTML.CSS 1.2VS code 1.3深入了解网站开发二.第二部分 2.1初始代码 2.2 注释 2.3HTML语义化 2.4标题与段落 ...
网页代码各种名称及作用 HTML全部
基本Web页文件 <HTML> <HEAD> <TITLE></TITLE> </HEAD> <BODY> </BODY& ...
HTML中的body及可以再body中出现的标签
网页的主体标记body 需要显示的浏览器网页模块的内容,都必须要定义在body中,<body> 标签,可以说是HTML文件中,最为重要的一块内容. 主体标记以<body> ...

table-rowspan

table-rowspan相关推荐

最新文章

热门文章