在 primeng table 中突出显示所选行

Question

我正在使用 primeng p-table 并使用复选框 select 或 select 按如下方式编辑行。

<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>

这是有效的，我可以通过单击复选框来 select 行。但是我还需要有以下东西。

Select 通过单击行上的任意位置（同时勾选复选框）
突出显示 selected 行。

我已经检查了 select 像 Multiple Selection without MetaKey 这样的行的其他选项，但它没有 Select全部选项。

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

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>

在 primeng table 中突出显示所选行

Highlight selected row in primeng table

javascript

typescript

primeng

angular