angular - 突出显示primeng表中的选定行而不选中复选框
问题描述
我正在使用primengp-table
和p-checkbox
。我希望能够在不选中复选框的情况下突出显示单击的行(或行内容)。应在单击复选框本身而不是行时选中复选框。我尝试使用[pSelectableRow]
,但除了突出显示它之外,它还检查复选框。
<p-table [columns]="cols" [value]="brands" [(selection)]="selected" dataKey="vin">
<ng-template pTemplate="header" let-columns>
<tr>
<th style="width: 3em">
<p-tableHeaderCheckbox></p-tableHeaderCheckbox>
</th>
<th *ngFor="let col of columns">
{{col.header}}
</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-rowData let-columns="columns">
<tr [pSelectableRow]="rowData">
<td>
<p-tableCheckbox [value]="rowData"></p-tableCheckbox>
</td>
<td *ngFor="let col of columns">
{{rowData[col.field]}}
</td>
</tr>
</ng-template>
</p-table>
我应该怎么做才能只突出显示单击的行,而不选中复选框?我创建了一个Stackblitz示例。
解决方案
在行上添加一些类
<tr [pSelectableRow]="rowData" class="some-class">
然后在css中做伎俩
.some-class:hover {
background-color: some color... or put any style you need
}
推荐阅读
- java - 字符串中的正斜杠不允许 HTML 为 JLabels 正常工作
- react-native - 如何在whatsapp上发送消息而不使用react-native打开应用程序?
- typescript - 推断的参数类型意外
- reverse-proxy - 如何使用 nginx 反向代理服务器限制对 RESTful API 的访问?
- javascript - 如何在 React Native 中渲染从数据库中检索的字符串中的换行符?
- adyen - Adyen Web SDK 如何记录产品信息?
- python - Python3如何读取由长度不同的空格分隔的文件
- javascript - Chrome 不会使用我预装的音频。它继续请求相同的文件
- node.js - 无法向目标套接字 ID 发送私人消息
- cmake - 在 CMake 中定义 Xcode 复制文件构建阶段