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然后这意味着选择了所有项目，您可以在此处检查它的逻辑

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

成分

  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>

演示