角材料垫表合并的行 [英] Angular Material mat table merged rows
本文介绍了角材料垫表合并的行的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在努力解决以下问题.我想将基本的html表更改为mat-table.但是我找不到一种方法来合并前两列中的两行.
我在顶部有mat-table，在底部有基本的html表:
[！[在此处输入图片描述] [1]] [1]
我在席子表中想要的是以下内容:对于每份参考书和发票，我都希望有两行，一行有发票，一行有预期，就像我的底表一样.
我的基本html表如下:
< table>< thead>< th * ngFor ="headersContainers的列"{{柱子}}</th></thead>< tbody * ngFor =< let container of completeContainers>< throwpan ="2"；> {{container.containerReference}}</th>< throwpan ="2"；> {{container.invoiceReference}}</th>< td>已开具发票的</td>< td> {{container.InvoicedCosts.OFC |货币:'€'}}</td>< td> {{container.InvoicedCosts.THC |货币:'€'}}</td>< td> {{container.InvoicedCosts.BAF |货币:'€'}}</td>< td> {{container.InvoicedCosts.Total |货币:'€'}}</td>< tr>< td>预期</td>< td> {{container.ExpectedCosts.OFC |货币:'€'}}</td>< td> {{container.ExpectedCosts.THC |货币:'€'}}</td>< td> {{container.ExpectedCosts.BAF |货币:'€'}}</td>< td> {{container.ExpectedCosts.Total |货币:'€'}}</td></tr></tbody></table> 我的mat-table html如下:
<表mat-table [dataSource] ="dataSource">< ng-container matColumnDef ="containerReference">< mat-header-cell * matHeaderCellDef [rowSpan] ＝"2">参考</th>< td mat-cell * matCellDef ="let container">{{container.containerReference}}</td></ng-container>< ng-容器matColumnDef ="InvoiceReference">< mat-header-cell * matHeaderCellDef [rowSpan] ＝"2">发票< td mat-cell * matCellDef ="let container">{{container.invoiceReference}}</td></ng-container>< ng-container matColumnDef ="InvoicedOrExpected"<第mat-header-cell * matHeaderCellDef>发票或预期的< td mat-cell * matCellDef ="let container">开票</td></ng-container>< ng-容器matColumnDef ="OHC"><第mat-header-cell * matHeaderCellDef>海洋处理成本< td mat-cell * matCellDef ="let container">{{container.OHC}}</td></ng-container>< ng-容器matColumnDef ="THC"><第mat-header-cell * matHeaderCellDef>终端处理费用< td mat-cell * matCellDef ="let container">{{container.THC}}</td></ng-container>< ng-容器matColumnDef ="BAF"><第mat-header-cell * matHeaderCellDef>燃料调整系数</th>< td mat-cell * matCellDef ="let container">{{container.BAF}}</td></ng-container>< ng-容器matColumnDef =总计"><第mat-header-cell * matHeaderCellDef>总</th>< td mat-cell * matCellDef ="let container">{{container.Total}}</td></ng-container>< tr mat-header-row * matHeaderRowDef ="headersContainers">/tr< tr mat-row * matRowDef ="让行；列:headersContainers；></tr></table> 我的数据源如下所示:
[{"containerReference":"20DV HLXU1234567"，"invoiceReference":"109554(20000678)"，发票费用":{"OFC":1023.0，"THC":100.0，"BAF":67.0，总计":1190.0}，"ExpectedCosts":{"OFC":465.0，"THC":205.0，"BAF":285.0，总计":955.0}}，{"containerReference":"20DV HLXU2234567"，"invoiceReference":"109554(20000678)"，发票费用":{"OFC":3445.0，"THC":65.0，"BAF":77.0，总计":3587.0}，"ExpectedCosts":{"OFC":465.0，"THC":205.0，"BAF":285.0，总计":955.0}}] 快速注意，由于我在Java中使用ArrayNode，因此可以更改dataSource设置.
我已将HTML文件更改为此:
< h1>每个容器的成本</h1>< mat-checkbox(change)="switchEvent($ event)"；labelPosition =之前">显示正确开具发票的容器</mat-checkbox>< table mat-table [dataSource] ="dataSource"><！-容器参考->< ng-container matColumnDef ="containerReference"><第mat-header-cell * matHeaderCellDef>参考</th>< td mat-cell * matCellDef ="let container">{{container.containerReference}}</td></ng-container><！-发票参考->< ng-容器matColumnDef ="invoiceReference"><第mat-header-cell * matHeaderCellDef>发票< td mat-cell * matCellDef ="let container">{{container.invoiceReference}}</td></ng-container><！-发票列->< ng容器matColumnDef =发票的OHC"><第mat-header-cell * matHeaderCellDef>海洋处理成本< td mat-cell * matCellDef ="let container">{{container.InvoicedCosts.OFC}}</td></ng-container>< ng-容器matColumnDef =已开发票的THC"><第mat-header-cell * matHeaderCellDef>终端处理费用< td mat-cell * matCellDef ="let container">{{container.InvoicedCosts.THC}}</td></ng-container>< ng-容器matColumnDef ="invoicedBAF"><第mat-header-cell * matHeaderCellDef>燃油调整系数</th>< td mat-cell * matCellDef ="let container">{{container.InvoicedCosts.BAF}}</td></ng-container>< ng-容器matColumnDef ="invoicedTotal"><第mat-header-cell * matHeaderCellDef>总</th>< td mat-cell * matCellDef ="let container">{{container.InvoicedCosts.Total}}</td></ng-container><！-预期的列->< ng-容器matColumnDef ="expectedOHC"><第mat-header-cell * matHeaderCellDef>/th< td mat-cell * matCellDef ="let container">{{container.ExpectedCosts.OFC}}</td></ng-container>< ng-容器matColumnDef ="expectedTHC"><第mat-header-cell * matHeaderCellDef>/th< td mat-cell * matCellDef ="let container">{{container.ExpectedCosts.THC}}</td></ng-container>< ng-容器matColumnDef ="expectedBAF"><第mat-header-cell * matHeaderCellDef>/th< td mat-cell * matCellDef ="let container">{{container.ExpectedCosts.BAF}}</td></ng-container>< ng-容器matColumnDef ="expectedTotal"><第mat-header-cell * matHeaderCellDef>/th< td mat-cell * matCellDef ="let container">{{container.ExpectedCosts.Total}}</td></ng-container><！-发票或预期的列->< ng-容器matColumnDef ="invoicedLabel"><第mat-header-cell * matHeaderCellDef>发票或预期的< td mat-cell * matCellDef ="let container">开票</td></ng-container>< ng-容器matColumnDef ="expectedLabel"><第mat-header-cell * matHeaderCellDef>/th< td mat-cell * matCellDef ="let container">预期</td></ng-container>< tr mat-header-row * matHeaderRowDef ="headersContainers">/tr< tr mat-row * matRowDef ="让行；列:headersContainers；></tr></table> SCSS如下:
表{宽度:100％;}.mat-column-containerReference {网格区域:containerReference;}.mat-column-invoiceReference {网格区域:invoiceReference;}.mat-column-invoicedOHC {grid-area:invoicedOHC;}.mat-column-invoicedTHC {网格区域:invoicedTHC;}.mat-column-invoicedBAF {网格区域:invoicedBAF;}.mat-column-invoicedTotal {网格区域:invoicedTotal;}.mat-columnexpectedOHC {网格区域:ExpectedOHC;}.mat-column-expectedTHC {网格区域:ExpectedTHC;}.mat-column-expectedBAF {网格区域:ExpectedBAF;}.mat-column-expectedTotal {网格区域:ExpectedTotal;}.mat-columnexpected {网格区域:预期；}.mat-column-invoiced {网格区域:已开发票；}.mat-column-invoicedLabel {网格区域:invoicedLabel;}.mat-column-expectedLabel {网格区域:ExpectedLabel;}tr {显示:网格；grid-template-columns:repeat(4，1fr);网格模板区域:容器参考发票参考发票标签标签发票OHC发票THC发票dBAF发票总额"容器参考发票参考期望标签期望OHC期望THC期望BAF期望总数"；}tr.mat-header-row {网格模板区域:容器参考发票参考发票被标签标签发票被OHC发票被THC发票dBAF被发票总计"；.mat-columnexpected，.mat-column-expectedLabel {显示:无；}}td，th {显示:flex;align-items:居中;padding-left:5px！important;右边框:1px实心rgba(128，128，128，.4);} 这会导致合并行成为我想要的方式，但是列不会与行合并:
[！[在此处输入图片描述] [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
解决方案
我认为这对CSS网格来说是一个很好的例子.在您的模板中，我根本不用担心rowSpans，只需将所有数据放入其自己的列中即可(发票和期望值具有单独的列).
为 tr 标记添加规则到 display:grid ，并根据需要定义 grid-template-columns .然后，您可以将 grid-area 应用于每列，并使用 grid-template-areas 规则定义"rowSpan".
如果希望标题显示不同，还可以为 tr.mat-header-row 定义一组不同的 grid-template-areas 规则./p>
我已经编写了一个小示例，该示例应具有与您所寻找的解决方案类似的解决方案: https://stackblitz.com/edit/angular-u2b8qa?file = src/app/table-basic-example.scss
I'm struggling with the following. I want to change my basic html table to a mat-table. But I can not find a way to merge the two rows on the first two columns.
I've got the mat-table on top and the basic html table on the bottom:
[![enter image description here][1]][1]
What I want in my mat table is the following: for each reference + invoice I want two rows, one with invoiced and one with expected, just like in my bottom table.
My basic html table is as following:
<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>
While my mat-table html is as following:
<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>
My dataSource looks as follows:
[
{
"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
}
}
]
Quick note that I can change the dataSource setup since I'm using ArrayNode in java.
EDIT:
I've changed the the HTML file to this:
<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>
And the SCSS is as following:
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);
}
This results in the merged rows how I wanted, but the columns do not allign with the rows:
[![enter image description here][2]][2]
EDIT 2:
after the comment of RobbieAreBest, I've changed the scss part grid-template-columns: repeat(4, 1fr); to grid-template-columns: repeat(7, 1fr);
This gave me the following result: [![enter image description here][3]][3]
Either, it still does not look perfect. If anyone knows how to make the cell allign, that would be nice! [1]: https://i.stack.imgur.com/JzP51.png [2]: https://i.stack.imgur.com/fnut4.png [3]: https://i.stack.imgur.com/Vx7cK.png
解决方案
I think this would be a good case for CSS grid. In your template, I wouldn't worry about rowSpans at all, just get all your data into its own column (have separate columns for Invoiced and Expected values).
Add a rule for your tr tags to display:grid and define you grid-template-columns as needed. You could then apply a grid-area to each column and define your 'rowSpan' by using a grid-template-areas rule.
You could also define a different set of grid-template-areas rules for tr.mat-header-row if you would like the header to display differently.
I've worked up a little example that should have a solution similar to what you are looking for: https://stackblitz.com/edit/angular-u2b8qa?file=src/app/table-basic-example.scss
这篇关于角材料垫表合并的行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
