PrimeNG Table点击按钮切换单元格编辑状态配置求助

我明白你现在的需求——想要通过按钮控制某一列的编辑状态，而不是默认就开放编辑权限。其实PrimeNG的p-cellEditor组件本身就提供了专门的属性来控制编辑状态，下面一步步帮你实现这个功能：

步骤1：在组件内定义控制状态的变量 #

首先在你的组件.ts文件里，新增一个变量来管理目标列的编辑状态，默认设为不可编辑：

isIdColumnEditable = false;

步骤2：添加切换状态的触发按钮 #

在模板的合适位置（比如表格上方、或者单独的操作列）添加一个按钮，用来切换这个变量的取值：

<button pButton label="切换ID列编辑状态" (click)="isIdColumnEditable = !isIdColumnEditable"></button>

步骤3：修改单元格编辑器绑定状态 #

接下来修改你原本的模板代码，给p-cellEditor绑定[editable]属性到我们定义的变量，这样就能动态控制编辑权限了：

<ng-template pTemplate="body" let-rowData let-state let-expanded="expanded" let-columns="columns" >
  <tr>
    <td>
      <p-cellEditor [editable]="isIdColumnEditable">
        <ng-template pTemplate="input">
          <input pInputText type="text" [(ngModel)]="rowData.id">
        </ng-template>
        <ng-template pTemplate="output">
          {{rowData.id}}
        </ng-template>
      </p-cellEditor>
    </td>
  </tr>
</ng-template>

额外拓展：控制单行的该列编辑状态 #

如果你的需求是点击按钮让某一行的ID列变为可编辑（而非整列），只需要把状态变量挂载到每一行的数据上即可：

1. 初始化数据时给每行添加编辑状态属性：

// 假设你的数据源是dataArray
this.dataArray = this.dataArray.map(item => ({...item, isIdEditable: false}));

2. 在表格的操作列添加单行控制按钮：

<td>
  <button pButton label="编辑此行ID" (click)="rowData.isIdEditable = !rowData.isIdEditable"></button>
</td>

3. 修改单元格编辑器的绑定：

<p-cellEditor [editable]="rowData.isIdEditable">
  <!-- 输入/输出模板内容不变 -->
</p-cellEditor>

核心逻辑就是利用p-cellEditor的[editable]属性，通过变量动态切换编辑权限，这样就能实现你想要的按钮触发编辑状态的效果了。

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