如何完全基于条件删除表选择模式

Question

p-table允许我们在想要启用行选择时添加selectionMode属性。这可以采用">单个"或">多个"作为可能的值。如果变量_selectionMode是NONE，我想要完全禁用行选择

我能想到的唯一方法是有条件地添加p-table组件，如下所示：

<p-table *ngIf="_selectedMode !== 'NONE'"
[value]="products"
selectionMode="single"
[(selection)]="selectedProduct1"
dataKey="code"
>
<p-table *ngIf="_selectedMode === 'NONE'"
[value]="products"
[(selection)]="selectedProduct1"
dataKey="code"

但如果我这样做，我必须复制p-table上的所有属性绑定(在我的项目中有很多(。有没有更好的方法可以有条件地禁用行选择？

简单堆叠litz在这里

Answer 1

将selectionMode设置为none，不进行选择。

参考这里做投票！

<p-toast></p-toast>
<button (click)="selectionMode = 'single'">single</button>
<button (click)="selectionMode = 'none'">none</button>
<button (click)="selectionMode = 'multiple'">multiple</button>
<div class="card">
<h5>Single</h5>
<p>
In single mode, a row is selected on click event of a row. If the row is
already selected then the row gets unselected.
</p>
<p-table
[value]="products"
[selectionMode]="selectionMode"
[(selection)]="selectedProduct1"
dataKey="code"
>
<ng-template pTemplate="header">
<tr>
<th>Code</th>
<th>Name</th>
<th>Category</th>
<th>Quantity</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-product>
<tr [pSelectableRow]="product">
<td>{{ product.code }}</td>
<td>{{ product.name }}</td>
<td>{{ product.category }}</td>
<td>{{ product.quantity }}</td>
</tr>
</ng-template>
</p-table>
</div>

堆叠式

Answer 2

这可以通过将selectionMode属性设置为null(通过属性绑定(来实现，如下所示。此外，您需要为每行将pSelectableRowDisabled设置为true