期望的效果为在表格的两列单元格中有多行显示,UI图:
其中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;
}