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

If you want to use native-table features such as colspan and rowspan you will need to use:

<table mat-table>

  ...

</table>

Ref: Native table element tags

For example:

Ref: Serendipity CRM

Answer 3

以您的示例为例

    <table mat-table [dataSource]="dataSource" multiTemplateDataRows>
  <ng-container matColumnDef="state">
            <th mat-header-cell *matHeaderCellDef rowspan="2">state</th>
        <td mat-cell *matCellDef="let company;let i = dataIndex" >alabama</td>
        </ng-container>
        <ng-container matColumnDef="utility">
            <th mat-header-cell *matHeaderCellDef rowspan="2">utility company</th>
        <td mat-cell *matCellDef="let company;let i = dataIndex" >company1</td>
        </ng-container>
        <ng-container matColumnDef="data1">
            <th mat-header-cell *matHeaderCellDef>{{'data1' | translate}}</th>
        <td mat-cell *matCellDef="let company;let i = dataIndex" >3.45</td>
        </ng-container>
        <ng-container matColumnDef="data2">
            <th mat-header-cell *matHeaderCellDef>{{'data2' | translate}}</th>
        <td mat-cell *matCellDef="let company;let i = dataIndex" >1.73</td>
        </ng-container>
        <ng-container matColumnDef="data3">
            <th mat-header-cell *matHeaderCellDef>{{'data3' | translate}}</th>
        <td mat-cell *matCellDef="let company;let i = dataIndex" >0.58</td>
        </ng-container>

        <ng-container matColumnDef="summer">
            <th mat-header-cell *matHeaderCellDef colspan="3">{{'summer period' | translate}}</th>
        <td mat-cell *matCellDef="let company;let i = dataIndex" ></td>
        </ng-container>

 <tr mat-row *matHeaderRowDef="['state','utility','data1','data2','data3']"></tr>
 <tr mat-row *matHeaderRowDef="['summer']"></tr>
 <tr mat-row *matRowDef="let element; columns:['state','utility','data1','data2','data3']"></tr>
</table>

我只是颠倒了夏季行的顺序，因为似乎这种方式行不通

Answer 4

我刚刚在我的材料表上使用了 [attr.colspan] 和 [attr.rowspan]

<table mat-table> 
 <ng-container matColumnDef="{{displayedColumns[0]}}">
    <th
      mat-header-cell
      class="text-center"
      *matHeaderCellDef>          
    </th>
    <td
      mat-cell
      class="text accent text-center"
      *matCellDef="let item">
    </td>
    <!-- usage example -->
    <td
      [attr.colspan]="displayedColumns.length"
      mat-footer-cell
      *matFooterCellDef>
    </td>
 </ng-container>
        .............
 <tbody>
   <tr
     mat-header-row
     class="mat-table-row-sm header-accent-separator"
     *matHeaderRowDef="displayedColumns; sticky: true"></tr>
   <tr
     mat-row
     class="mat-table-row-sm"
     *matRowDef="let row; columns: displayedColumns;"></tr>
   <tr
     mat-footer-row
     class="mat-table-row-sm position-relative"
     *matFooterRowDef="[displayedColumns[0]]; sticky: true">
    <!-- matFooterRowDef can be the count of columns -->
   </tr>
 </tbody>
</table>

如何将colSpan和行跨度添加到物料表Header Angular 7？

4 个答案: