Angular 12 PrimeNG表格头部checkbox实现全选（不使用内置selection）

改动步骤 #

1. 组件TS文件补充逻辑 #

先声明所需变量，再实现全选和单行校验方法：

// 已选中的行ID集合
selectedLeaves: number[] = [];
// 头部全选框的选中状态
isAllSelected: boolean = false;
// 表格数据源（原有逻辑已存在的话可忽略重复声明）
value: any[] = [];

/**
 * 头部全选框触发方法
 * @param checked 全选框当前是否选中
 */
allSelect(checked: boolean): void {
  this.isAllSelected = checked;
  this.selectedLeaves = checked ? this.value.map(item => item.id) : [];
}

/**
 * 单行选中状态变更时触发，自动同步全选框状态
 */
onRowSelectChange(): void {
  this.isAllSelected = this.value.length > 0 && this.selectedLeaves.length === this.value.length;
}

2. 调整模板绑定逻辑 #

修改头部全选checkbox绑定

把原有头部checkbox的代码替换为以下内容，移除错误的value绑定，改为绑定全选状态：

<th *ngIf="status!='all'" style="width: 40px" pFrozenColumn class="border-right-none">
  <p-checkbox [(ngModel)]="isAllSelected" (onChange)="allSelect($event.checked)"></p-checkbox>
</th>

修改行checkbox绑定

给行checkbox补充状态变更事件，同时修正inputId为唯一值，避免多个复选框共用同一个id导致的点击异常：

<td  *ngIf="status!='all'" style="width: 40px" pFrozenColumn class="border-right-none">
  <div *ngIf="status!='all'">
    <p-checkbox 
      name="group1" 
      value="{{leave.id}}" 
      [(ngModel)]="selectedLeaves" 
      [inputId]="'ch-' + leave.id"
      (onChange)="onRowSelectChange()"
    ></p-checkbox>
  </div>
</td>

注意说明 #

• 上述逻辑默认仅选中当前分页的表格行，如果你需要跨分页全选，只需把allSelect方法中赋值selectedLeaves的数据源替换为全量数据的ID集合即可
• 需确保表格每一行数据都存在唯一的id字段，和value属性绑定的ID保持一致

内容的提问来源于stack exchange，提问作者Damith F'do