如何实现Primeng表格双击行触发编辑功能？

针对你的需求，这里提供两种可行方案，无需依赖PrimeNG原生支持，即可实现双击任意单元格触发行编辑：

方案1：直接调用PrimeNG行编辑API（推荐） #

这种方式无需模拟按钮点击，直接通过PrimeNG表格的API触发编辑状态，更符合Angular组件化思想，避免DOM操作的潜在问题。

步骤1：修改模板代码 #

给表格添加模板引用变量#dt，并给行标签<tr>绑定双击事件：

<p-table #dt [value]="products" dataKey="id" editMode="row" [tableStyle]="{'min-width': '50rem'}">
    <ng-template #header>
        <tr>
            <th style="width:20%">Name</th>
        </tr>
    </ng-template>
    <ng-template #body let-product let-editing="editing" let-ri="rowIndex">
        <!-- 绑定双击事件，传入当前行数据和编辑状态 -->
        <tr [pEditableRow]="product" (dblclick)="handleRowDblClick(product, editing)">
            <td>
                <p-cellEditor>
                    <ng-template #input>
                        <input
                            pInputText type="text"
                            [(ngModel)]="product.name"
                            required />
                    </ng-template>
                    <ng-template #output>
                        {{product.name}}
                    </ng-template>
                </p-cellEditor>
            </td>
            <td>
                <div class="flex items-center justify-center gap-2">
                    <button
                        *ngIf="!editing"
                        pButton
                        pRipple
                        type="button"
                        pInitEditableRow
                        icon="pi pi-pencil"
                        (click)="onRowEditInit(product)"
                        text
                        rounded
                        severity="secondary"
                    ></button>
                    <button
                        *ngIf="editing"
                        pButton
                        pRipple
                        type="button"
                        pSaveEditableRow
                        icon="pi pi-check"
                        (click)="onRowEditSave(product)"
                        text
                        rounded
                        severity="secondary"
                    ></button>
                    <button
                        *ngIf="editing"
                        pButton
                        pRipple
                        type="button"
                        pCancelEditableRow
                        icon="pi pi-times"
                        (click)="onRowEditCancel(product, ri)"
                        text
                        rounded
                        severity="secondary"
                    ></button>
                </div>
            </td>
        </tr>
    </ng-template>
</p-table>

步骤2：实现组件逻辑 #

在组件类中获取表格实例，并编写双击事件处理方法：

import { Component, ViewChild } from '@angular/core';
import { Table } from 'primeng/table';

@Component({
  // 你的组件元数据（selector、templateUrl等）
})
export class YourComponent {
  products: any[] = [];
  // 获取表格实例
  @ViewChild('dt') dt!: Table;

  handleRowDblClick(product: any, editing: boolean) {
    // 仅当未处于编辑状态时触发
    if (!editing) {
      // 调用原有的初始化方法
      this.onRowEditInit(product);
      // 通过表格API启动行编辑
      this.dt.initEditableRow(product);
    }
  }

  // 以下是你原有的行编辑方法
  onRowEditInit(product: any) {
    // 你的初始化逻辑，比如备份原数据等
  }

  onRowEditSave(product: any) {
    // 你的保存逻辑
  }

  onRowEditCancel(product: any, rowIndex: number) {
    // 你的取消逻辑
  }
}

方案2：模拟点击pInitEditableRow按钮 #

如果你一定要通过模拟按钮点击的方式实现，可以通过DOM选择器找到对应行的编辑按钮并触发点击事件。

步骤1：修改模板代码 #

给行标签绑定双击事件，传入产品ID；同时给编辑按钮添加唯一标识：

<tr [pEditableRow]="product" (dblclick)="triggerEditButtonClick(product.id)">
<!-- ... -->
<button
    *ngIf="!editing"
    pButton
    pRipple
    type="button"
    pInitEditableRow
    icon="pi pi-pencil"
    (click)="onRowEditInit(product)"
    text
    rounded
    severity="secondary"
    [id]="'edit-btn-' + product.id"
></button>

步骤2：实现组件逻辑 #

编写触发按钮点击的方法：

triggerEditButtonClick(productId: string | number) {
    const editButton = document.getElementById(`edit-btn-${productId}`) as HTMLButtonElement;
    if (editButton) {
        editButton.click();
    }
}

这种方式需要注意：确保按钮的唯一标识准确，避免因分页、排序导致行索引失效的问题。

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