在不选中复选框的情况下突出显示 primeng table 中的选定行

Question

我正在使用 primeng p-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 示例。

Answer 1

在行

上添加一些class

<tr [pSelectableRow]="rowData" class="some-class">

然后在 css 中执行此操作

.some-class:hover {
  background-color: some color... or put any style you need
}

Answer 2

我能够通过维护一个获取单击行值的变量 highlight 并将高亮显示 class 仅分配给该值等于单击行值的行来实现此目的。

<ng-template pTemplate="body" let-rowData let-columns="columns">
        <tr class="some-class"  [class.ui-state-highlight]="rowData === highlighted">
            <td>
                <p-tableCheckbox [value]="rowData"></p-tableCheckbox>
            </td>
            <td *ngFor="let col of columns">
            
                <a (click)="highlighted = rowData"> {{rowData[col.field]}}</a>
            </td>
        </tr>
    </ng-template>

已更新 Stackblitz here。

在不选中复选框的情况下突出显示 primeng table 中的选定行

Highlight selected row in primeng table without checking the checbox

angular

primeng

p-table