Primeng表格如何同时实现复选框多选与点击行单选功能

要实现「点击复选框多选、点击行单选」的效果，可通过隔离两类点击事件、手动控制选中逻辑完成，具体实现如下：

1. 模板配置 #

首先完成表格模板的基础配置，核心是阻止复选框点击事件冒泡，避免触发行点击逻辑：

<p-table 
  [value]="tableData" 
  [(selection)]="selectedList"
  dataKey="id"
  (rowClick)="onRowClick($event)"
>
  <!-- 表头 -->
  <ng-template pTemplate="header">
    <tr>
      <th style="width: 3rem">
        <p-tableHeaderCheckbox 
          (click)="$event.stopPropagation()"
          (onChange)="onHeaderCheckChange($event)"
        ></p-tableHeaderCheckbox>
      </th>
      <th>字段名1</th>
      <th>字段名2</th>
    </tr>
  </ng-template>
  <!-- 表格内容 -->
  <ng-template pTemplate="body" let-rowItem>
    <tr>
      <td>
        <p-tableCheckbox 
          [value]="rowItem"
          (click)="$event.stopPropagation()"
        ></p-tableCheckbox>
      </td>
      <td>{{rowItem.field1}}</td>
      <td>{{rowItem.field2}}</td>
    </tr>
  </ng-template>
</p-table>

注意：所有复选框节点都需要添加(click)="$event.stopPropagation()"，切断事件向上冒泡的路径，保证两类点击逻辑完全隔离。

2. 业务逻辑实现 #

在ts文件中添加变量定义和事件处理方法：

// 表格数据源
tableData: any[] = [];
// 已选中项集合
selectedList: any[] = [];

// 行点击事件：仅单选当前点击行
onRowClick(event: any) {
  // 直接将选中集合替换为仅包含当前点击行，实现单选效果
  this.selectedList = [event.data];
  // 若需要支持点击同一行取消选中，可替换为以下逻辑：
  // const currentRowId = event.data.id;
  // const isAlreadySelected = this.selectedList.some(item => item.id === currentRowId);
  // this.selectedList = isAlreadySelected ? [] : [event.data];
}

// 表头全选框逻辑
onHeaderCheckChange(event: any) {
  this.selectedList = event.checked ? [...this.tableData] : [];
}

注意事项 #

• 必须给p-table配置dataKey属性，取值为每行数据的唯一标识字段（如id、uuid等），避免选中状态匹配错误
• 复选框的多选逻辑不需要额外手动实现，Primeng的p-tableCheckbox绑定[(selection)]后会默认维护多选状态
• 若需要限制最大可选数量，可在复选框的onChange事件中添加校验逻辑，超出限制时回滚选中状态

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