html - PrimeNG 表 [rowHovered] 不适用于设置了单元格背景的单元格
问题描述
我有一个可滚动的TreeTable,其rowHover
-attribute 定义如下:
<p-treeTable [value]="items" [columns]="scrollableCols" [resizableColumns]="true" [frozenColumns]="frozenCols" [scrollable]="true" scrollHeight="550px" frozenWidth="600px" [rowHover]="true" *ngIf="submitFinished">
所以我设置了第二列和第三列的背景——我这样做:
<td style="text-align: center; height: 40px" [ngStyle]="{'background-color' : (col.field=='diff') ? ((getColumnValue(rowData, columns, i) > 0) ?
'#e2fee2' : ((getColumnValue(rowData, columns, i) < 0) ? '#ffa695' : 'white') ) : 'white'}"> <!-- this code only applies on each 2nd and 3rd column, not the first one. The second is always white, the third is either #ffa695, #e2fee2 or white - the first still has its default value -->
这完全没问题,可悲的rowHover
是,它不仅悬停在我没有改变背景的单元格上。是否有机会避免这种情况并仍然悬停整行?如果在行悬停时看不到彩色背景,那很好。
编辑:
我假设它这样做是因为应用[ngStyle]
“保持跟踪”字段的值,然后将颜色应用到它,所以即使选择 fromrowHover
也应该被覆盖。可悲的是,我不知道如何解决这个问题。
这就是我希望它看起来的样子:(通过不应用上述内容创建的[ngStyle]
示例<td>
)
不过,如果它有帮助的代码:
完整的可滚动正文(应适用的地方):
<ng-template pTemplate="body" let-rowData="rowData" let-columns="columns">
<tr *ngIf="!rowData.hours"><td *ngFor="let col of columns" style="height: 60px" class="psp-row-cell"></td></tr>
<tr *ngIf="rowData.hours">
<ng-template ngFor let-i="index" let-col [ngForOf]="columns">
<ng-template [ngIf]="rowDataIsEmpty(rowData, col)" [ngIfElse]="editableColumn">
<td class="blocked-cell" style="height: 40px">
</td>
</ng-template>
<ng-template #editableColumn>
<ng-template [ngIf]="col.field=='plan'" [ngIfElse]="blockedCell">
<td style="text-align: center; height: 40px" [ttEditableColumn]="rowData">
<p-treeTableCellEditor>
<ng-template pTemplate="input">
<input pInputText type="text" style="text-align: center" [ngModel]="getColumnValue(rowData, columns, i)" (ngModelChange)="setColumnValue(rowData, columns, i, $event)" [ngStyle]="{'width':'100%'}">
</ng-template>
<ng-template pTemplate="output">{{getColumnValue(rowData, columns, i)}}</ng-template>
</p-treeTableCellEditor>
</td>
</ng-template>
<ng-template #blockedCell>
<td style="text-align: center; height: 40px" [ngStyle]="{'background-color' : (col.field=='diff') ? ((getColumnValue(rowData, columns, i) > 0) ?
'#e2fee2' : ((getColumnValue(rowData, columns, i) < 0) ? '#ffa695' : 'white') ) : 'white'}">
{{getColumnValue(rowData, columns, i)}}
</td>
</ng-template>
</ng-template>
</ng-template>
</tr>
</ng-template>
获取列值:
getColumnValue(rowData: any[], columns: any, i: number): number {
let col = columns[i];
let val;
if (col.field == 'diff') {
col = columns[i-2];
val = rowData['hours'].find(entry => entry.year === col.year && entry.month === col.month)[col.field];
col = columns[i-1];
val = val - rowData['hours'].find(entry => entry.year === col.year && entry.month === col.month)[col.field];
} else {
val = rowData['hours'].find(entry => entry.year === col.year && entry.month === col.month)[col.field];
}
return val;
}
解决方案
正如假设的那样,当由 更改时,background-color
似乎被覆盖了。一种解决方法是简单地将back 更改为,因此:[ngStyle]
rowHover
white
transparent
[ngStyle]="{'background-color' : (col.field=='diff') ? ((getColumnValue(rowData, columns, i) > 0) ?
'#e2fee2' : ((getColumnValue(rowData, columns, i) < 0) ? '#ffa695' : 'transparent') ) : 'transparent'}
这是解决这个问题的一种方式。
推荐阅读
- android - 获取 Android 资源链接失败
- html - 无法单击某个元素,因为其他元素会遮挡它
- ios - onTapGesture 后偏移量不会重置 - SwiftUI
- c# - Sortedlist/Dictionary 在索引处修改键的值
- mysql - HQL 自动增量 INSERT - SELECT:“操作数应包含 1 列”
- android - 在 android kotlin 中以编程方式创建联系人并将其共享为 v-card/vcf 文件
- python - url {% url employees:check_matricule %} 没有在 forms.py 中运行
- javascript - 响应式顶部导航仅适用于手机
- python - Jupyter 笔记本感叹号参数
- reactjs - 使用 NextJS 在 Reactjs 中导入 jpg 图像 一些图像导入返回长字符串