如何为Angular Material表格的页脚行添加分隔线

这里提供三种实用的实现方式，根据你的需求选择即可：

方法一：用CSS伪类直接定位最后一行数据 #

在组件的CSS样式文件中添加以下代码，直接给最后一行数据行加上下边框：

/* 给最后一个数据行添加下边框 */
.mat-row:last-of-type {
  border-bottom: 2px solid #cccccc; /* 可根据需求调整线条颜色、粗细 */
}

这种方式最简单，适合表格数据直接渲染、不需要特殊逻辑判断最后一行的场景。

方法二：通过Angular指令标记最后一行 #

如果需要更灵活的判断逻辑（比如不是单纯数组最后一项才显示分隔线），可以用Angular的last变量结合ngClass来标记：

1. 在表格行模板中添加判断：

<tr mat-row 
    *matRowDef="let row; let last = last; columns: displayedColumns;"
    [ngClass]="{'last-data-row': last}">
</tr>

2. 然后在样式文件中定义对应的类：

.last-data-row {
  border-bottom: 2px solid #cccccc;
}

方法三：给页脚行添加上边框 #

如果希望分隔线紧贴页脚上方，也可以直接给页脚行设置上边框：

.mat-footer-row {
  border-top: 2px solid #cccccc;
}

这种方式效果和前两种一致，只是从页脚的角度来设置样式。

内容的提问来源于stack exchange，提问作者Tristate