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

【问题标题】：How colSpan and row Span added to material table Header Angular 7?colSpan 和 row Span 如何添加到材料表 Header Angular 7？
【发布时间】：2019-09-06 03:34:45
【问题描述】：

我正在尝试在 Angular material Table header 中添加 rowSpan and colSpan。谁能帮我实现它。

以下是我想使用材料表获取的附加页眉

【问题讨论】：

标签： angular-material angular-material2 angular7 tableheader mat-table

【解决方案1】：

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

<table mat-table>

  ...

</table>

参考：Native table element tags

例如：

参考：Serendipity CRM

【讨论】：

【解决方案2】：

我有像你一样的示例任务。我很容易在第二个标题中不显示任何内容。

  <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

【讨论】：

我一直在寻找将固定列效果与 colSpan 结合起来。这有很大帮助。但是它只适用于旧的标签而不是标签。

我看到它也适用于标签。使用 mat-table 对我来说没有意义。

对于像[attr.rowspan]="2" 这样简单的硬编码内容，您可以使用更简单的rowspan="2"，因为它是静态的，不需要是动态的 ?

style="display:none;" 的样式同样适用于隐藏单元格。 ?

【解决方案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>

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

【讨论】：

【解决方案4】：

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

要实现问题中提供的示例，您需要两个表头。第一个将包含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 定义添加到您的列中。我希望这是有道理的，如果没有，请告诉我，我会尝试扩展我的答案。

【讨论】：

【解决方案5】：

我刚刚在材料表上使用了[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>

【讨论】：