Angular中使用p-table时如何为第二个表格符合条件的行添加颜色

实现方案 #

第一步：给封装的公共表格组件加输入配置 #

在Data-Component.ts中新增两个输入参数，用来控制行高亮逻辑：

// Data-Component.ts
import { Input } from '@angular/core';

// 原有代码保持不变，新增以下属性
@Input() enableRowHighlight = false;
// 行高亮判定函数，返回true时对应当前行高亮
@Input() highlightCheck: (row: any) => boolean = () => false;

第二步：修改公共表格行的样式绑定 #

修改Data-Component.html中body模板的tr标签，通过[ngClass]动态绑定高亮类，同时新增对应样式：

<!-- Data-Component.html body部分tr标签修改 -->
<tr 
  [pContextMenuRow]="block" 
  [pSelectableRow]="block" 
  [pSelectableRowIndex]="rowIndex"
  [ngClass]="{'highlight-yellow': enableRowHighlight && highlightCheck(block)}"
>
 <td *ngFor="let col of getKeys(columns)" (click)=fetchDataArray(block)>
     {{block[col]}}
 </td>
</tr>

在Data-Component对应的样式文件中添加高亮样式：

/* Data-Component.css */
.highlight-yellow {
  background-color: #fff3cd !important; /* 可自行调整黄色色值 */
}

如果自定义样式被PrimeNG原有样式覆盖，可以把上述样式写到项目全局样式文件styles.css中。

第三步：给第二个表格传入高亮配置 #

修改Component-Box.html中第二个app-data-table的调用参数，开启行高亮：

<!-- Component-Box.html 第二个表格部分 -->
<app-data-table 
  [listItems]="table.value" 
  [selectedEntity]="table.key" 
  [entityData]="columnData"
  [enableRowHighlight]="true"
  [highlightCheck]="checkRowHighlight"
> 
</app-data-table>

第四步：实现行高亮判定逻辑 #

在Component-Box.ts中新增判定函数，按你的需求写判断规则即可：

// Component-Box.ts
// 新增判定函数，箭头函数避免this指向异常
checkRowHighlight = (row: any) => {
  // 按需求判断，对应suspended列等于T时返回true即可
  return row.suspended === 'T';
  // 如果你实际判断的是C1字段等于T，就改成 return row.C1 === 'T';
}

之前你在fetchDataArray中循环识别符合条件行的代码可以直接删除，不需要额外给行打标记，上述方案会自动在渲染时判定每行是否需要高亮。

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