Angular-Material在表格中插入表格

371 阅读1分钟

期望的效果为在表格的两列单元格中有多行显示,UI图:

image.png

其中SKU和三个数量值为一个主数组中的数组,例如数据格式如下:

{
"order_id": "30",
"plan_id": "48",
"sku_data": [
        {
        "plan_qty": "1",
        "order_qty": "0",
        "products_sku": "1-1"
        },
        {
        "plan_qty": "1",
        "order_qty": "0",
        "products_sku": "1-2"
        },
        {
        "plan_qty": "1",
        "order_qty": "0",
        "products_sku": "1-3"
        },
    ]
}

html中的写法:

<ng-container matColumnDef="sku_data">
    <mat-header-cell *matHeaderCellDef>sku</mat-header-cell>
    <mat-cell *matCellDef="let row">
        <mat-table [dataSource]="row.sku_data" class="sku_table">
            <ng-container matColumnDef="products_sku">
                <mat-header-cell *matHeaderCellDef class="no_header"></mat-header-cell>
                <mat-cell *matCellDef="let user">{{ user.products_sku }}</mat-cell>
            </ng-container>
            <mat-header-row *matHeaderRowDef="displaySkuData; sticky:true"></mat-header-row>
        <mat-row *matRowDef="let row; columns: displaySkuData;" matRipple></mat-row>
        </mat-table>
    </mat-cell>
</ng-container>
<ng-container matColumnDef="sku_data_num">
  	<mat-header-cell *matHeaderCellDef>计划/下单/已回货数量</mat-header-cell>
    <mat-cell *matCellDef="let row">
        <mat-table [dataSource]="row.sku_data" class="sku_table">
            <ng-container matColumnDef="plan_qty">
                <mat-header-cell *matHeaderCellDef class="no_header"></mat-header-cell>
                <mat-cell *matCellDef="let user">{{ user.plan_qty }}/{{ user.order_qty }}</mat-cell>
            </ng-container>
            <mat-header-row *matHeaderRowDef="displaySkuNumData; sticky:true"></mat-header-row>
        <mat-row *matRowDef="let row; columns: displaySkuNumData;" matRipple></mat-row>
        </mat-table>
    </mat-cell>
</ng-container>

数组名sku_data需要声明为主表格该列的列名。
子表格的数据源为:[dataSource]="row.sku_data"

CSS样式设置需要隐藏表头和横线:
隐藏表头:

mat-header-row{
        display: none;
    }

隐藏横线:

mat-row{
        border-style:none;
    }