如何在PrimeNG中点击添加按钮生成默认可编辑新行？

直接上可运行的代码示例，核心是通过跟踪编辑状态，让新增的行默认进入编辑模式：

TypeScript 代码 #

import { Component } from '@angular/core';
import { Product } from './product.model'; // 替换为你实际的实体模型

@Component({
  selector: 'app-table-edit',
  templateUrl: './table-edit.component.html'
})
export class TableEditComponent {
  products: Product[] = []; // 表格数据源
  editedRow: Product | null = null; // 跟踪当前处于编辑状态的行

  // 初始化模拟数据
  ngOnInit() {
    this.products = [
      { id: 1, name: 'Product 1', price: 100 },
      { id: 2, name: 'Product 2', price: 200 }
    ];
  }

  // 新增可编辑行
  addNewRow() {
    // 创建空的新行实体，id可后续由后端生成，这里先设为临时值
    const newProduct: Product = { id: 0, name: '', price: 0 };
    this.products.push(newProduct);
    // 将新行设为当前编辑行，触发表格进入编辑状态
    this.editedRow = newProduct;
  }

  // 提交编辑后的行数据
  saveRow(product: Product) {
    // 这里替换为你的后端提交逻辑，比如调用API保存数据
    console.log('提交的行数据:', product);
    // 清除编辑状态，退出编辑模式
    this.editedRow = null;
  }
}

HTML 模板代码（PrimeNG表格） #

<p-table [value]="products" editMode="row" [scrollable]="true" scrollHeight="400px">
  <ng-template pTemplate="header">
    <tr>
      <th>ID</th>
      <th>Name</th>
      <th>Price</th>
      <th>Actions</th>
    </tr>
  </ng-template>

  <ng-template pTemplate="body" let-product let-editing="editing">
    <tr [pEditableRow]="product" [ngClass]="{'p-highlight': editedRow === product}">
      <td>
        <p-cellEditor>
          <ng-template pTemplate="input">
            <input pInputText type="number" [(ngModel)]="product.id" disabled>
          </ng-template>
          <ng-template pTemplate="output">
            {{ product.id }}
          </ng-template>
        </p-cellEditor>
      </td>
      <td>
        <p-cellEditor>
          <ng-template pTemplate="input">
            <input pInputText [(ngModel)]="product.name" required>
          </ng-template>
          <ng-template pTemplate="output">
            {{ product.name }}
          </ng-template>
        </p-cellEditor>
      </td>
      <td>
        <p-cellEditor>
          <ng-template pTemplate="input">
            <input pInputText type="number" [(ngModel)]="product.price" required>
          </ng-template>
          <ng-template pTemplate="output">
            {{ product.price | currency }}
          </ng-template>
        </p-cellEditor>
      </td>
      <td>
        <!-- 仅当前编辑的行显示Done按钮 -->
        <button *ngIf="editedRow === product" pButton type="button" icon="pi pi-check" 
                class="p-button-success p-button-sm" (click)="saveRow(product)"></button>
      </td>
    </tr>
  </ng-template>

  <ng-template pTemplate="footer">
    <tr>
      <td colspan="4">
        <button pButton type="button" label="ADD NEW" icon="pi pi-plus" 
                class="p-button-primary" (click)="addNewRow()"></button>
      </td>
    </tr>
  </ng-template>
</p-table>

关键实现点 #

• 表格设置editMode="row"开启行编辑模式，通过[pEditableRow]="product"标记行可编辑
• editedRow变量用来跟踪新增的行，确保新增后直接进入编辑状态，并且只在该行显示Done按钮
• 新增行时，创建空实体并推入数据源，同时将editedRow指向它，表格会自动触发编辑模式
• Done按钮点击时，执行提交逻辑（比如调用API），然后清除editedRow退出编辑状态

如果你的表格用的是单元格编辑模式，只需要把editMode改成cell，调整pEditableRow为pEditableColumn即可，核心逻辑不变。

内容的提问来源于stack exchange，提问作者hanushi-thana