如何在PrimeNG表格中禁用指定列的selectableRow功能

要实现点击复选框列仅勾选复选框、不触发行选择跳转，其他列正常选中跳转，核心是阻止复选框列的点击事件冒泡到行元素，具体操作如下：

• 在包含p-checkbox的<td>标签上添加(click)="$event.stopPropagation()"，拦截事件向上传递，避免触发行的pSelectableRow逻辑。

修改后的表格主体代码如下：

<ng-template pTemplate="body" let-articulotif>
  <tr [pSelectableRow]="articulotif">
    <td>{{articulotif.codigoArticulo}}</td>
    <td>{{articulotif.nombreArticulo}}</td>
    <td>{{articulotif.nombreAlmacen}}</td>
    <td>{{listaTif[articulotif.tipoTif]}}</td>
    <td>{{articulotif.fechaReferencia | date: ('formatofecha' | translate)}}</td>
    <td>{{articulotif.diasRotacion}}</td>
    <td>{{articulotif.diasPeriodico}}</td>
    <td>{{articulotif.numeroMovimientos}}</td>
    <td>{{articulotif.contadorMovimientos}}</td>
    <td>{{articulotif.nivelInventario}}</td>
    <td>{{articulotif.fechaUltimoTif | date: ('formatofecha' | translate)}}</td>
    <td>{{articulotif.observacion}}</td>
    <!-- 给该td添加阻止事件冒泡的逻辑 -->
    <td (click)="$event.stopPropagation()">
      <div class="field-checkbox">
        <p-checkbox [(ngModel)]="articulotif.requieretif" [binary]="true"></p-checkbox>
      </div>
    </td>
  </tr>
</ng-template>

原理说明 #

PrimeNG的pSelectableRow通过监听<tr>元素的点击事件触发行选择和onRowSelect回调。点击复选框列时，事件会从复选框向上冒泡到<td>再到<tr>，添加stopPropagation()后，事件到<td>就会被拦截，不会触发<tr>的行选择逻辑，同时完全不影响复选框自身的勾选功能。

内容的提问来源于stack exchange，提问作者camilomartinezrincon