如何使用跨列(colspan)来对齐 mat 表格中的总计。

huangapple go评论71阅读模式
英文:

How to use footer with colspan to align total in mat table

问题

需要在金额列下方显示总计。

目前,我正在使用margin-left属性来在金额列下方显示总计。由于这不起作用,有人能否建议我如何使用具有colspan的表底部来实现这一目标?

演示

英文:

Need to show the total below the amount column.

Currently, I'm using the margin-left property to show the total below the amount column. Since this is not working properly, could someone suggest to me how to achieve this using a table footer with colspan?

<a href="https://stackblitz.com/edit/angular-mat-table-design-mxj3ho?file=src/app/app.component.html">Demo</a>

答案1

得分: 1

  1. &lt;tr mat-row&gt; 元素之后添加以下行:
&lt;tr mat-footer-row *matFooterRowDef=&quot;columnsToDisplay&quot;&gt;&lt;/tr&gt;
  1. 确保每个元素都包含 matColumnDef 属性,如下所示:
&lt;td mat-footer-cell *matFooterCellDef&gt;&lt;/td&gt;
  1. 对于 Amount 元素,mat-footer-cell 应该是:
&lt;td mat-footer-cell *matFooterCellDef&gt; 总计:{{ getTotal() }} &lt;/td&gt;

演示 @ StackBlitz

英文:

You need the mat-footer-row as mentioned in the comment.

  1. Add this line:
&lt;tr mat-footer-row *matFooterRowDef=&quot;columnsToDisplay&quot;&gt;&lt;/tr&gt;

after &lt;tr mat-row&gt; element.

  1. Make sure each element contains matColumnDef attribute must have:
&lt;td mat-footer-cell *matFooterCellDef&gt;&lt;/td&gt;
  1. For Amount element, the mat-footer-cell should be:
&lt;td mat-footer-cell *matFooterCellDef&gt; Total: {{ getTotal() }} &lt;/td&gt;

Demo @ StackBlitz

答案2

得分: 0

I am able to do it using mat-footer-row

Below need to add for each column

For amount column

{{getTotalCost() | currency}}

below needs to be added

Demo

英文:

I am able to do it using mat-footer-row

Below need to add for each column

&lt;td mat-footer-cell *matFooterCellDef&gt;&lt;/td&gt;

For amount column

&lt;td mat-footer-cell *matFooterCellDef&gt;{{getTotalCost() | currency}}&lt;/td&gt;

below needs to be added

&lt;tr mat-header-row *matHeaderRowDef=&quot;displayedColumns&quot;&gt;&lt;/tr&gt;
  &lt;tr mat-row *matRowDef=&quot;let row; columns: displayedColumns;&quot;&gt;&lt;/tr&gt;
  &lt;tr mat-footer-row *matFooterRowDef=&quot;displayedColumns&quot;&gt;&lt;/tr&gt;

<a href="https://stackblitz.com/edit/kp2rjx?file=src%2Fapp%2Ftable-footer-row-example.ts,src%2Fapp%2Ftable-footer-row-example.html">Demo</a>

huangapple
  • 本文由 发表于 2023年5月10日 14:26:21
  • 转载请务必保留本文链接:https://go.coder-hub.com/76215442.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定