Angular-AntdTable（一）：三维数组(对象)表格合并

来吧！展示：

源码：

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

@Component({
    selector: 'app-welcome',
    styleUrls: ['./welcome.component.scss'],
    template: `
        <nz-table #basicTable [nzData]="listOfData" nzBordered>
            <thead>
            <tr>
                <th>公司</th>
                <th>性别</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>个人级操作</th>
                <th>性别级操作</th>
                <th>公司级操作</th>
            </tr>
            </thead>
            <tbody>
            <ng-container *ngFor="let t of basicTable.data;">
                <ng-container *ngFor="let data of t.staff; first as isFir;">
                    <ng-container *ngFor="let item of data.info; first as isFirst;">
                        <tr>
                            <!-- 公司 -->
                            <td [attr.rowspan]="t.rowspan" *ngIf="isFirst && isFir">{{ t.company }}</td>
                            <!-- 性别 -->
                            <td [attr.rowspan]="data.info.length" *ngIf="isFirst">{{ data.sex ? '男' : '女' }}</td>
                            <!-- 姓名 -->
                            <td>{{ item.name }}</td>
                            <!-- 年龄 -->
                            <td>{{ item.age }}</td>
                            <!-- 操作 -->
                            <td>
                                Edit ｜ Delete
                            </td>
                            <!-- 操作 -->
                            <td [attr.rowspan]="data.info.length" *ngIf="isFirst">Edit ｜ Delete</td>
                            <!-- 操作 -->
                            <td [attr.rowspan]="t.rowspan" *ngIf="isFirst && isFir">
                                Edit ｜ Delete
                            </td>
                        </tr>
                    </ng-container>
                </ng-container>
            </ng-container>
            </tbody>
        </nz-table>
    `
})

export class WelcomeComponent implements OnInit {

    listOfData = [
        {
            company: 'Company-01', staff: [
                {sex: 1, info: [{name: 'Lee', age: 23}]}
            ]
        },
        {
            company: 'Company-02', staff: [
                {sex: 0, info: [{name: '员工-01', age: 21}, {name: '员工-02', age: 31}]},
                {sex: 1, info: [{name: '员工-04', age: 20}, {name: '员工-05', age: 22}, {name: '员工-03', age: 22}]}
            ]
        },
        {
            company: 'Company-03', staff: [
                {sex: 1, info: [{name: '张三', age: 20}, {name: '张三', age: 20}]},
                {sex: 0, info: [{name: '李四', age: 23}]}
            ]
        },
        {
            company: 'Company-04', staff: [
                {sex: 0, info: []}
            ]
        },
        {
            company: 'Company-05', staff: [
                {sex: 1, info: [{name: '张三', age: 20}, {name: '张三', age: 20}]},
                {sex: 0, info: []},
            ]
        },
        {
            company: 'Company-06', staff: [
                {sex: 1, info: []},
                {sex: 0, info: [{name: '张三', age: 20}, {name: '张三', age: 20}]},
            ]
        }
    ];

    constructor() {
    }

    ngOnInit(): void {
        this.listOfData = this.dataListRow(this.listOfData, 'staff', 'info');
    }

    /**
     * 处理合并单元格(三层)
     * data: 需处理的数据
     * key1: 需处理的二层数组的key1
     * key2: 需处理的三层数组的key2
     */
    dataListRow(data, key1, key2) {
        data.forEach(el1 => {
            if (el1[key1].length === 0) {
                el1[key1] = [{}];
            } else {
                let i = 0;
                el1[key1].forEach(el2 => {
                    if (el2[key2].length === 0) {
                        el2[key2] = [{}];
                    }
                    i += el2[key2].length;
                });
                el1.rowspan = i ? i : 1;
            }
        });
        return data;
    }
}