Primeng表格复选框状态动态联动问题求助

核心思路 #

放弃依赖[(selection)]双向绑定的自动更新逻辑，转而监听p-tableCheckbox的onChange事件，在回调里手动处理选中数组的增删，避免双向绑定覆盖自定义联动规则。

基础实现代码 #

模板文件（HTML）

<p-table [value]="dataList" [(selection)]="selectedItems">
  <ng-template pTemplate="header">
    <tr>
      <th><p-tableCheckbox></p-tableCheckbox></th>
      <th>行内容</th>
    </tr>
  </ng-template>
  <ng-template pTemplate="body" let-rowData>
    <tr>
      <td>
        <p-tableCheckbox 
          [value]="rowData" 
          (onChange)="handleRowSelection(rowData)"
        ></p-tableCheckbox>
      </td>
      <td>{{rowData.content}}</td>
    </tr>
  </ng-template>
</p-table>

组件类（TypeScript）

import { Component, OnInit } from '@angular/core';

interface TableRow {
  id: number;
  content: string;
}

@Component({
  selector: 'app-table-demo',
  templateUrl: './table-demo.component.html'
})
export class TableDemoComponent implements OnInit {
  dataList: TableRow[] = [];
  selectedItems: TableRow[] = [];

  ngOnInit(): void {
    // 初始化数据，根据不同示例调整默认选中项
    this.initDataForDemo2();
  }

  // 示例1初始化：3行数据，无默认选中
  initDataForDemo1(): void {
    this.dataList = [
      { id: 1, content: '第1行' },
      { id: 2, content: '第2行' },
      { id: 3, content: '第3行' }
    ];
    this.selectedItems = [];
  }

  // 示例2初始化：4行数据，默认选中1、2行
  initDataForDemo2(): void {
    this.dataList = [
      { id: 1, content: '第1行' },
      { id: 2, content: '第2行' },
      { id: 3, content: '第3行' },
      { id: 4, content: '第4行' }
    ];
    this.selectedItems = this.dataList.filter(row => row.id <= 2);
  }

  handleRowSelection(rowData: TableRow): void {
    const isRowSelected = this.selectedItems.includes(rowData);
    if (isRowSelected) {
      this.handleRowUnselect(rowData);
    } else {
      this.handleRowSelect(rowData);
    }
  }

  // 处理行选中时的联动逻辑
  private handleRowSelect(rowData: TableRow): void {
    // 示例1规则：全未选中时，选中第2行自动选中第1行
    if (rowData.id === 2 && this.selectedItems.length === 0) {
      const row1 = this.dataList.find(row => row.id === 1);
      if (row1) this.selectedItems.push(row1);
    }

    // 示例2规则：选中第3行自动选中第4行
    if (rowData.id === 3) {
      const row4 = this.dataList.find(row => row.id === 4);
      if (row4 && !this.selectedItems.includes(row4)) {
        this.selectedItems.push(row4);
      }
    }

    // 将当前行加入选中数组并去重
    this.selectedItems.push(rowData);
    this.selectedItems = [...new Set(this.selectedItems)];
  }

  // 处理行取消选中时的联动逻辑
  private handleRowUnselect(rowData: TableRow): void {
    // 示例2规则：取消选中第2行时，自动取消第1行
    if (rowData.id === 2) {
      this.selectedItems = this.selectedItems.filter(row => row.id !== 1);
    }

    // 移除当前行
    this.selectedItems = this.selectedItems.filter(row => row.id !== rowData.id);
  }
}

关键说明 #

1. 事件监听优先：通过(onChange)捕获复选框状态变化，手动控制selectedItems数组，避免双向绑定的自动更新干扰自定义逻辑。
2. 数组更新触发变更检测：每次修改selectedItems时，都通过扩展运算符[...new Set()]或filter创建新数组，确保Angular能检测到变化并更新视图。
3. 分场景初始化：通过initDataForDemo1/initDataForDemo2切换不同示例的初始状态，方便测试。
4. 去重处理：使用new Set()避免重复添加同一行数据到选中数组。

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