p-tablecheckbox和p-tableheadercheckbox

Question

我有一个带有复选框标题的表，并且在选中该复选框时，仅需要检查基于条件的几行，而在取消选中该复选框的情况下，则需要删除选中的行。

HTML

<p-table [value]="_rows" [columns]="columns" [(selection)]="selectedRows">
    <p-tableHeaderCheckbox id="selectAllRows" (click)="selectRow()"></p-tableHeaderCheckbox>
    <p-tableCheckbox [value]="row" (click)="selectRow()" [disabled]="row.userDefined==='N'">
        </p-tableCheckbox
></p-table>

JS

selectRow() {
    this.selectedRows = this.selectedRows.filter(value => value.flag === 'Y');
    this.selectedEvent.emit(this.selectedRows);
}

Answer 1

[p-tableheadercheckbox组件具有将所有行设置为selectedRows的一种逻辑，那么这意味着所有项目均已选中，您可以检查它为逻辑here

您可以简化p-checkbox绑定selectRow单击事件将完成您想要的工作

component

  selectRow(checkValue) {
    if (checkValue) {
      this.selectedRows = this.cars.filter(value => value.year < 2000);
    } else {
      this.selectedRows = [];
    }
  }

模板

<p-table [value]="cars" [columns]="cols" [(selection)]="selectedRows">
    <ng-template pTemplate="header" let-columns>
        <tr>
      <th>
        <p-checkbox (click)="selectRow(e.checked)" #e></p-checkbox>
      </th>
            <th *ngFor="let col of columns">
                {{col.header}}
            </th>

        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-rowData let-columns="columns">
        <tr [pSelectableRow]="rowData">
      <td>
            <p-tableCheckbox [value]="rowData" [disabled]="rowData.year > 2000">
        </p-tableCheckbox>

      </td>
            <td *ngFor="let col of columns">
                {{rowData[col.field]}}
            </td>

        </tr>
    </ng-template>
</p-table>

demo 🚀🚀