本文详解如何利用 PrimeNG p-table 的 onRowSelect 和 onRowUnselect 事件，实现行间复选框的动态联动逻辑（如选中某行自动勾选/取消勾选其他指定行），避免手动操作 selection 数组引发的视图不同步问题。
本文详解如何利用 primeng `p-table` 的 `onrowselect` 和 `onrowunselect` 事件，实现行间复选框的动态联动逻辑（如选中某行自动勾选/取消勾选其他指定行），避免手动操作 `selection` 数组引发的视图不同步问题。
在 PrimeNG 的 p-table 组件中，通过 [(selection)] 双向绑定可实现多选功能，但若需自定义行间联动行为（例如“选中第2行则自动选中第1行”或“选中第3行则强制选中第4行”），直接修改 selection 数组往往导致 UI 渲染滞后、事件重复触发或状态不一致。正确做法是借助表格提供的原生事件钩子，在用户交互发生时精准干预选择逻辑。
✅ 推荐方案：使用 onRowSelect 与 onRowUnselect 事件
PrimeNG p-table 提供了两个关键事件：
- (onRowSelect)="onRowSelect($event)"：当用户点击未选中行的复选框（或行本身启用了 selectionMode="single/multiple"）时触发；
- (onRowUnselect)="onRowUnselect($event)"：当用户取消已选中行时触发。
这两个事件接收 TableSelectEvent 对象，其中 event.data 即为被操作的行数据，event.type 为 'row'，且它们在视图更新前执行，因此可在回调中安全地修改 selection 数组并触发 Angular 变更检测。
示例：实现「选中第2行 → 自动选中第1行」与「取消第2行 → 自动取消第1行」
<p-table
[value]="products"
[(selection)]="selectedProducts"
selectionMode="multiple"
(onRowSelect)="onRowSelect($event)"
(onRowUnselect)="onRowUnselect($event)">
<ng-template pTemplate="header">
<tr>
<th><p-tableCheckbox /></th>
<th>Name</th>
<th>Category</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-product>
<tr [pSelectableRow]="product">
<td><p-tableCheckbox /></td>
<td>{{ product.name }}</td>
<td>{{ product.category }}</td>
</tr>
</ng-template>
</p-table>// component.ts
export class ProductTableComponent {
products: Product[] = [
{ id: 1, name: 'Laptop', category: 'Electronics' },
{ id: 2, name: 'Mouse', category: 'Electronics' },
{ id: 3, name: 'Keyboard', category: 'Electronics' }
];
selectedProducts: Product[] = []; // 初始无选中（或按需预设）
onRowSelect(event: TableSelectEvent) {
const row = event.data as Product;
// 示例逻辑1：选中 id=2 → 强制选中 id=1
if (row.id === 2) {
const target = this.products.find(p => p.id === 1);
if (target && !this.selectedProducts.includes(target)) {
this.selectedProducts.push(target);
}
}
// 示例逻辑2：选中 id=3 → 强制选中 id=4（若存在）
if (row.id === 3) {
const target = this.products.find(p => p.id === 4);
if (target && !this.selectedProducts.includes(target)) {
this.selectedProducts.push(target);
}
}
}
onRowUnselect(event: TableSelectEvent) {
const row = event.data as Product;
// 示例逻辑：取消 id=2 → 同时取消 id=1
if (row.id === 2) {
const target = this.products.find(p => p.id === 1);
if (target) {
const index = this.selectedProducts.findIndex(p => p.id === target.id);
if (index > -1) {
this.selectedProducts.splice(index, 1);
}
}
}
// 示例逻辑：取消 id=1 → 若 id=2 也被选中，则一并取消（双向约束）
if (row.id === 1) {
const dependent = this.products.find(p => p.id === 2);
if (dependent && this.selectedProducts.includes(dependent)) {
const index = this.selectedProducts.findIndex(p => p.id === dependent.id);
if (index > -1) {
this.selectedProducts.splice(index, 1);
}
}
}
}
}⚠️ 注意事项与最佳实践
- 不要在事件中直接赋值 this.selectedProducts = [...]：这会破坏引用一致性，导致 p-tableCheckbox 内部状态不同步；应使用 push() / splice() 等原地修改方法。
- 确保 selection 数组元素与 value 数组中的对象严格相等（引用一致）：PrimeNG 依赖对象引用比对。若后端返回新对象，需用 find() 获取原始引用，或启用 [compareWith]（需配合 trackBy 优化性能）。
- 避免递归触发：在 onRowSelect 中添加新项可能再次触发 onRowSelect（如启用了 metaKey 多选）。可通过临时标记或防抖处理，或改用 setTimeout(() => {...}, 0) 延迟执行（适用于简单场景）。
- 初始化默认选中状态：若需预设某些行被选中，直接初始化 selectedProducts 数组为 products.filter(...) 的结果即可，无需额外调用事件。
✅ 总结
PrimeNG 表格的 onRowSelect / onRowUnselect 是实现复杂选择逻辑的官方推荐入口。它解耦了 UI 交互与业务规则，既保证响应及时性，又规避了直接操作 selection 导致的脏检查异常。结合清晰的条件判断与安全的数组操作，即可稳健实现任意粒度的复选框联动需求——无论是单向依赖、双向约束，还是树形父子选中，均可在此基础上扩展。
