P-表格使用复选框[PrimeNG]进行多选

Question

我需要帮助；多选(点击+移动("；我不明白如何使它在复选框上工作。

在文档中有一个例子"；复选框选择"；并注意到"；也可以通过启用列的selectionMode属性为"来使用复选框来处理多选；多个">

文档示例：

<p-table [value]="products" [(selection)]="selectedProducts3" dataKey="code" responsiveLayout="scroll">
<ng-template pTemplate="header">
<tr>
<th style="width: 3rem">
<p-tableHeaderCheckbox></p-tableHeaderCheckbox>
</th>
<th>Code</th>
<th>Name</th>
<th>Category</th>
<th>Quantity</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-product>
<tr>
<td>
<p-tableCheckbox [value]="product"></p-tableCheckbox>
</td>
<td>{{product.code}}</td>
<td>{{product.name}}</td>
<td>{{product.category}}</td>
<td>{{product.quantity}}</td>
</tr>
</ng-template>
</p-table>

但当我尝试添加这个属性"selectionMode"时，它仍然不起作用。

我的新例子：

<p-table [value]="products" [(selection)]="selectedProducts3" dataKey="code" responsiveLayout="scroll"
selectionMode="multiple"> // <--------- Added line with selectionMode property
<ng-template pTemplate="header">
<tr>
<th style="width: 3rem">
<p-tableHeaderCheckbox></p-tableHeaderCheckbox>
</th>
<th>Code</th>
<th>Name</th>
<th>Category</th>
<th>Quantity</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-product>
<tr>
<td>
<p-tableCheckbox [value]="product"></p-tableCheckbox>
</td>
<td>{{product.code}}</td>
<td>{{product.name}}</td>
<td>{{product.category}}</td>
<td>{{product.quantity}}</td>
</tr>
</ng-template>

我认为这是一个愚蠢的错误，但我是PrimeNG的新手，所以我会非常乐意得到任何帮助。

这是演示。

Answer 1

必须将metaKeySelection属性设置为true才能使用(click + shift)进行多选
要使行可选，请使用pSelectableRow和pSelectableRowIndex属性。

这是修改后的代码：

<p-table
[value]="products"
[(selection)]="selectedProducts3"
dataKey="code"
selectionMode="multiple"
[metaKeySelection]="true"
>
<ng-template pTemplate="header">
<tr>
<th style="width: 3rem">
<p-tableHeaderCheckbox></p-tableHeaderCheckbox>
</th>
<th>Code</th>
<!-- others -->
</tr>
</ng-template>
<ng-template pTemplate="body" let-product let-rowIndex="rowIndex">
<tr [pSelectableRow]="product" [pSelectableRowIndex]="rowIndex">
<td>
<p-tableCheckbox
[value]="product"
></p-tableCheckbox>
</td>
<td>{{ product.code }}</td>
<!-- others -->
</tr>
</ng-template>
</p-table>