Question

我正在努力解决以下问题。我想将基本的html表更改为mat表。但是我找不到合并前两列中两行的方法。

我在顶部有mat-table，在底部有基本的html表：

[！[在此处输入图片描述] [1]] [1]

我想要的垫子表如下：对于每份参考书和发票，我都希望有两行，一行有发票，一行有预期，就像我的底表一样。

我的基本html表如下：

<table>
  <thead>
    <th *ngFor= "let column of headersContainers">
      {{column}}
    </th>
  </thead>

  <tbody *ngFor = "let container of completeContainers">
    <th rowspan = "2" >{{container.containerReference}}</th>
    <th rowspan = "2" >{{container.invoiceReference}}</th>
      <td>Invoiced</td>
      <td>{{container.InvoicedCosts.OFC | currency :'€ '}}</td>
      <td>{{container.InvoicedCosts.THC | currency :'€ '}}</td>
      <td>{{container.InvoicedCosts.BAF | currency :'€ '}}</td>
      <td>{{container.InvoicedCosts.Total | currency :'€ '}}</td>
    <tr> 
      <td>Expected</td> 
      <td>{{container.ExpectedCosts.OFC | currency :'€ '}}</td>
      <td>{{container.ExpectedCosts.THC | currency :'€ '}}</td>
      <td>{{container.ExpectedCosts.BAF | currency :'€ '}}</td>
      <td>{{container.ExpectedCosts.Total | currency :'€ '}}</td>
    </tr>
  </tbody>
</table>

我的mat-table html如下：

<table mat-table [dataSource]="dataSource">

  <ng-container matColumnDef="containerReference">
    <th mat-header-cell *matHeaderCellDef [rowSpan]="2"> Reference </th>
    <td mat-cell *matCellDef="let container"> {{container.containerReference}} </td>
  </ng-container>

  <ng-container matColumnDef="InvoiceReference">
    <th mat-header-cell *matHeaderCellDef [rowSpan]="2"> Invoice </th>
    <td mat-cell *matCellDef="let container"> {{container.invoiceReference}} </td>
  </ng-container>

  <ng-container matColumnDef="InvoicedOrExpected">
    <th mat-header-cell *matHeaderCellDef> Invoiced or expected </th>
    <td mat-cell *matCellDef="let container"> Invoiced </td>
  </ng-container>

  <ng-container matColumnDef="OHC">
    <th mat-header-cell *matHeaderCellDef> Ocean handling costs </th>
    <td mat-cell *matCellDef="let container"> {{container.OHC}} </td>
  </ng-container>

  <ng-container matColumnDef="THC">
    <th mat-header-cell *matHeaderCellDef> Terminal handling costs </th>
    <td mat-cell *matCellDef="let container"> {{container.THC}} </td>
  </ng-container>

  <ng-container matColumnDef="BAF">
    <th mat-header-cell *matHeaderCellDef> Bunker adjustment factor </th>
    <td mat-cell *matCellDef="let container"> {{container.BAF}} </td>
  </ng-container>

  <ng-container matColumnDef="Total">
    <th mat-header-cell *matHeaderCellDef> Total </th>
    <td mat-cell *matCellDef="let container"> {{container.Total}} </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="headersContainers"></tr>
  <tr mat-row *matRowDef="let row; columns: headersContainers;"> </tr>

</table>

我的数据源如下：

[
    {
        "containerReference": "20DV HLXU1234567",
        "invoiceReference": "109554 (20000678)",
        "InvoicedCosts": {
            "OFC": 1023.0,
            "THC": 100.0,
            "BAF": 67.0,
            "Total": 1190.0
        },
        "ExpectedCosts": {
            "OFC": 465.0,
            "THC": 205.0,
            "BAF": 285.0,
            "Total": 955.0
        }
    },
    {
        "containerReference": "20DV HLXU2234567",
        "invoiceReference": "109554 (20000678)",
        "InvoicedCosts": {
            "OFC": 3445.0,
            "THC": 65.0,
            "BAF": 77.0,
            "Total": 3587.0
        },
        "ExpectedCosts": {
            "OFC": 465.0,
            "THC": 205.0,
            "BAF": 285.0,
            "Total": 955.0
        }
    }
]

快速注意，由于我在Java中使用ArrayNode，因此可以更改dataSource设置。

编辑：

我已将HTML文件更改为此：

<h1>Costs per container</h1>
<mat-checkbox (change)="switchEvent($event)" labelPosition ="before">Show correctly invoiced containers</mat-checkbox>

<table mat-table [dataSource]="dataSource">

  <!--Container reference-->
  <ng-container matColumnDef="containerReference">
    <th mat-header-cell *matHeaderCellDef> Reference </th>
    <td mat-cell *matCellDef="let container"> {{container.containerReference}} </td>
  </ng-container>

  <!--Invoice reference-->
  <ng-container matColumnDef="invoiceReference">
    <th mat-header-cell *matHeaderCellDef> Invoice </th>
    <td mat-cell *matCellDef="let container"> {{container.invoiceReference}} </td>
  </ng-container>

  <!--Invoiced columns-->
  <ng-container matColumnDef="invoicedOHC">
    <th mat-header-cell *matHeaderCellDef> Ocean handling costs </th>
    <td mat-cell *matCellDef="let container"> {{container.InvoicedCosts.OFC}} </td>
  </ng-container>

  <ng-container matColumnDef="invoicedTHC">
    <th mat-header-cell *matHeaderCellDef> Terminal handling costs </th>
    <td mat-cell *matCellDef="let container"> {{container.InvoicedCosts.THC}} </td>
  </ng-container>

  <ng-container matColumnDef="invoicedBAF">
    <th mat-header-cell *matHeaderCellDef> Bunker adjustment factor </th>
    <td mat-cell *matCellDef="let container"> {{container.InvoicedCosts.BAF}} </td>
  </ng-container>

  <ng-container matColumnDef="invoicedTotal">
    <th mat-header-cell *matHeaderCellDef> Total </th>
    <td mat-cell *matCellDef="let container"> {{container.InvoicedCosts.Total}} </td>
  </ng-container>

  <!--expected columns-->
  <ng-container matColumnDef="expectedOHC">
    <th mat-header-cell *matHeaderCellDef></th>
    <td mat-cell *matCellDef="let container"> {{container.ExpectedCosts.OFC}} </td>
  </ng-container>

  <ng-container matColumnDef="expectedTHC">
    <th mat-header-cell *matHeaderCellDef></th>
    <td mat-cell *matCellDef="let container"> {{container.ExpectedCosts.THC}} </td>
  </ng-container>

  <ng-container matColumnDef="expectedBAF">
    <th mat-header-cell *matHeaderCellDef></th>
    <td mat-cell *matCellDef="let container"> {{container.ExpectedCosts.BAF}} </td>
  </ng-container>

  <ng-container matColumnDef="expectedTotal">
    <th mat-header-cell *matHeaderCellDef></th>
    <td mat-cell *matCellDef="let container"> {{container.ExpectedCosts.Total}} </td>
  </ng-container>

  <!--Invoiced or expected columns-->
  <ng-container matColumnDef="invoicedLabel">
    <th mat-header-cell *matHeaderCellDef> Invoiced or expected </th>
    <td mat-cell *matCellDef="let container"> Invoiced </td>
  </ng-container>

  <ng-container matColumnDef="expectedLabel">
    <th mat-header-cell *matHeaderCellDef></th>
    <td mat-cell *matCellDef="let container"> Expected </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="headersContainers"></tr>
  <tr mat-row *matRowDef="let row; columns: headersContainers;"> </tr>

</table>

SCSS如下：

table {
  width: 100%;
}

.mat-column-containerReference {grid-area: containerReference;}
.mat-column-invoiceReference {grid-area: invoiceReference;}
.mat-column-invoicedOHC {grid-area: invoicedOHC;}
.mat-column-invoicedTHC {grid-area: invoicedTHC;}
.mat-column-invoicedBAF {grid-area: invoicedBAF;}
.mat-column-invoicedTotal {grid-area: invoicedTotal;}
.mat-column-expectedOHC {grid-area: expectedOHC;}
.mat-column-expectedTHC {grid-area: expectedTHC;}
.mat-column-expectedBAF {grid-area: expectedBAF;}
.mat-column-expectedTotal {grid-area: expectedTotal;}
.mat-column-expected {grid-area: expected;}
.mat-column-invoiced {grid-area: invoiced;}
.mat-column-invoicedLabel {grid-area: invoicedLabel;}
.mat-column-expectedLabel {grid-area: expectedLabel;}

tr {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-areas: 
            "containerReference invoiceReference invoicedLabel invoicedOHC invoicedTHC invoicedBAF invoicedTotal"
            "containerReference invoiceReference expectedLabel expectedOHC expectedTHC expectedBAF expectedTotal";
}

tr.mat-header-row {
  grid-template-areas: 
        "containerReference invoiceReference invoicedLabel invoicedOHC invoicedTHC invoicedBAF invoicedTotal";
  
  .mat-column-expected,
  .mat-column-expectedLabel {
    display: none;
  }
}

td, th {
  display: flex;
  align-items: center;
  padding-left: 5px !important;
  border-right: 1px solid rgba(128, 128, 128, .4);
}

这会导致合并行成为我想要的方式，但是列不会与行合并：

[！[在此处输入图片描述] [2]] [2]

编辑2：

在RobbieAreBest评论后，我将scss部分grid-template-columns: repeat(4, 1fr);更改为grid-template-columns: repeat(7, 1fr);

这给了我以下结果： [！[在此处输入图片描述] [3]] [3]

要么，它仍然看起来并不完美。如果有人知道如何使细胞成为异体，那就太好了！ [1]：https://i.stack.imgur.com/JzP51.png [2]：https://i.stack.imgur.com/fnut4.png [3]：https://i.stack.imgur.com/Vx7cK.png

Answer 1

我认为这对于CSS网格来说是一个很好的例子。在您的模板中，我完全不用担心rowSpans，只需将所有数据放入其自己的列中即可（发票和期望值具有单独的列）。

将tr标签的规则添加到display:grid，并根据需要定义grid-template-columns。然后，您可以将grid-area应用于每一列，并使用grid-template-areas规则定义“ rowSpan”。

如果您希望标题显示不同，还可以为grid-template-areas定义一组tr.mat-header-row规则。

我已经编写了一个小示例，该示例应具有与您所寻找的解决方案类似的解决方案： https://stackblitz.com/edit/angular-u2b8qa?file=src/app/table-basic-example.scss

角材料垫表合并的行

1 个答案: