colSpan 和 row Span 如何添加到材料表 Header Angular 7？

Question

我尝试添加rowSpan and colSpan在Angular material Table header。任何人都可以帮助我实现它。

下面是我想使用材料表获得的附加标题

Answer 1

我有像你一样的示例任务。我只是很容易用第二个标题显示无。

  <ng-container matColumnDef="position">
    <th mat-header-cell *matHeaderCellDef [ngStyle]="{'display': 'none'}"> No. </th>
    <td mat-cell *matCellDef="let element"> {{element.position}} </td>
  </ng-container>

 <!-- first stage header -->
  <ng-container matColumnDef="No">
    <th mat-header-cell *matHeaderCellDef [attr.rowspan]="2">No</th>
  </ng-container>

这是我的结果

您可以通过我的链接了解更多信息： StackBlitz

Answer 2

我遇到了同样的问题，并从以前的答案中汲取了一些灵感，发现以下内容可以完美运行。

要实现问题中提供的示例，您将需要两个表头。第一个将包含State,Utilities company和Summer Period列，而第二个将包含data1, data2&data3列。为此，请从以下开始：

<table mat-table [dataSource]="dataSource" class="my-table">
  <tr mat-header-row *matHeaderRowDef="['state', 'company', 'summer']"></tr>
  <tr mat-header-row *matHeaderRowDef="['data1', 'data2', 'data3']"></tr>
  <tr mat-row *matRowDef="let row; columns: ['state', 'company', 'data1', 'data2', 'data3']"></tr>
</table>

这段代码创建了一个带有两个表标题行的表，对于数据源中的每个数据点，一行有 5 个使用提供的列的单元格。

要正确设置这些标题行的样式，我们需要使用rowSpan和colSpan。对于每一列，我们创建我们的ng-container：

<ng-container matColumnDef="state">
  <th mat-header-cell *matHeaderCellDef [attr.rowspan]="2">State</th>
  <td mat-cell *matCellDef="let data">State name here (e.g. {{data.state}})</td>
</ng-container>

<ng-container matColumnDef="company">
  <th mat-header-cell *matHeaderCellDef [attr.rowspan]="2">Utilities company</th>
  <td mat-cell *matCellDef="let data">Utilities company here</td>
</ng-container>

<ng-container matColumnDef="summer">
  <th mat-header-cell *matHeaderCellDef [attr.colspan]="3">Summer</th>
  <!-- This column doesn't generate <td> items, so no need to add a definition for them -->
</ng-container>

<ng-container matColumnDef="data1">
  <th mat-header-cell *matHeaderCellDef>Data 1</th>
  <td mat-cell *matCellDef="let data">{{data.yourFirstDataPoint}}</td>
</ng-container>

<ng-container matColumnDef="data2">
  <th mat-header-cell *matHeaderCellDef>Data 2</th>
  <td mat-cell *matCellDef="let data">{{data.yourSecondDataPoint}}</td>
</ng-container>

<ng-container matColumnDef="data3">
  <th mat-header-cell *matHeaderCellDef>Data 3</th>
  <td mat-cell *matCellDef="let data">{{data.yourThirdDataPoint}}</td>
</ng-container>

这将为您创建所需的结果。如果需要，您也可以mat-sort向列添加定义。我希望这是有道理的，如果没有，请告诉我，我会尝试扩大我的答案。

Answer 3

如果您想使用本机表功能，例如 colspan 和 rowspan，您将需要使用：

<table mat-table>

  ...

</table>

参考：本机表格元素标签

例如：

参考：Serendipity CRM