angular-material - 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>

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

要正确设置这些标题行的样式，我们需要使用rowSpanand 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

举个例子试试这个

    <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>

Answer 5

如果您想使用 colspan 和 rowspan 等原生表功能，您将需要使用：

<table mat-table>

  ...

</table>

参考：本机表格元素标签

例如：

参考：Serendipity CRM