p-tablecheckbox 和 p-tableheadercheckbox

Question

我有一个 table 复选框 header 并且在选中复选框时，只有几行基于条件需要被检查，并且在取消选中复选框时，选中的检查需要消失。

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 点击事件来完成您想要的工作

组件

  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

p-tablecheckbox 和 p-tableheadercheckbox

p-tablecheckbox and p-tableheadercheckbox

primeng

angular