突出显示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，但它没有全选选项。

我该怎么做？任何帮助将不胜感激。谢谢

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>