如何在mat-table中每3行交替设置不同颜色的行边框

API 探路者

2026-6-18

实现思路与代码示例

首先修正你颜色数组里的拼写错误：'#aoaoao' 应为 '#a0a0a0'（字母o换成数字0），'#rdrdrd' 应为 '#cdcdcd'（r换成c），否则颜色值无效。

方案一：直接用 `ngStyle` 动态绑定边框

利用行索引计算当前分组（每3行一组），再从颜色数组中取对应颜色，超出数组长度时循环取色：

组件类中修正颜色数组：

colors = ['#123456', '#a0a0a0', '#cdcdcd', '#222222'];

模板中修改 mat-row：

<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row 
    *matRowDef="let row; let index=index; columns: displayedColumns;"
    [ngStyle]="{
      'border-bottom': `2px solid ${colors[Math.floor(index / 3) % colors.length]}`
    }">
</tr>

清除mat-table默认行边框（在组件样式中）：

.mat-row {
  border-bottom: none; /* 避免默认边框与自定义边框冲突 */
}

方案二：用 `ngClass` 结合CSS类（样式与逻辑分离）

通过动态生成类名，在CSS中绑定对应颜色，更便于样式维护：

模板中动态绑定类名：

<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row 
    *matRowDef="let row; let index=index; columns: displayedColumns;"
    [class]="`row-border-${Math.floor(index / 3) % colors.length}`">
</tr>

组件样式中定义对应类的边框样式：

:host {
  --color-0: #123456;
  --color-1: #a0a0a0;
  --color-2: #cdcdcd;
  --color-3: #222222;
}

.row-border-0 { border-bottom: 2px solid var(--color-0); }
.row-border-1 { border-bottom: 2px solid var(--color-1); }
.row-border-2 { border-bottom: 2px solid var(--color-2); }
.row-border-3 { border-bottom: 2px solid var(--color-3); }

.mat-row {
  border-bottom: none;
}