突出显示primeng表中的选定行

Question

我正在使用 primeng p-table并使用复选框选择器来选择行，如下所示。

<p-table [value]="data" [paginator]="true" [loading]="loading" [(selection)]="selectedItems" #dt>
<ng-template pTemplate="header">
   <tr>
      <th style="width: 3rem">
         <p-tableHeaderCheckbox></p-tableHeaderCheckbox>
      </th>
      <th>Header 1</th>
      <th>Header 2</th>
   </tr>
</ng-template>
<ng-template pTemplate="body" let-row>
   <td>
      <p-tableCheckbox [value]="row"></p-tableCheckbox>
   </td>
   <td>Column 1</td>
   <td>Column 2</td>
</ng-template>
</p-table>

这是有效的，我可以通过单击复选框来选择行。 但我还需要具备以下几点。

1. 通过单击行上的任意位置来选择该行（也勾选复选框）
2. 突出显示所选行。

我已经检查了其他用于选择行的选项，例如Multiple Selection without MetaKey ，但它没有Select All选项。

我怎样才能做到这一点 ？ 任何帮助将不胜感激。 谢谢

Answer 1

这是直接取自primeng文档。 您的行格式不正确，您在正文模板下缺少包装“tr”。 您基本上需要设置选择模式和可选择的行属性，这应该突出显示行。 您可以在代码中添加一些逻辑，用于根据以下示例中的 selectedCar 将复选框标记为选中。

<p-table [columns]="cols" [value]="cars" selectionMode="single" [(selection)]="selectedCar">
    <ng-template pTemplate="header" let-columns>
        <tr>
            <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 *ngFor="let col of columns">
                {{rowData[col.field]}}
            </td>
        </tr>
    </ng-template>
</p-table>