Angular2应用中PrimeNG表格行内编辑、删除及新增按钮实现咨询

嘿，我刚好有过类似的开发经验，用PrimeNG完全能实现你要的这套表格功能——行内编辑、删除、新增一行，下面给你一个完整的可运行示例和关键细节拆解：

HTML模板部分 #

<div class="p-4">
  <button pButton pRipple label="新增行" class="p-button-success mb-3" (click)="addNewRow()"></button>

  <p-table [value]="tableData" [editable]="true" responsiveLayout="scroll">
    <ng-template pTemplate="header">
      <tr>
        <th>姓名</th>
        <th>邮箱</th>
        <th>年龄</th>
        <th>操作</th>
      </tr>
    </ng-template>
    <ng-template pTemplate="body" let-row let-editing="editing" let-index="rowIndex">
      <tr [pEditableRow]="row">
        <td>
          <p-cellEditor>
            <ng-template pTemplate="input">
              <input pInputText type="text" [(ngModel)]="row.name" class="w-full">
            </ng-template>
            <ng-template pTemplate="output">
              {{row.name}}
            </ng-template>
          </p-cellEditor>
        </td>
        <td>
          <p-cellEditor>
            <ng-template pTemplate="input">
              <input pInputText type="email" [(ngModel)]="row.email" class="w-full">
            </ng-template>
            <ng-template pTemplate="output">
              {{row.email}}
            </ng-template>
          </p-cellEditor>
        </td>
        <td>
          <p-cellEditor>
            <ng-template pTemplate="input">
              <input pInputText type="number" [(ngModel)]="row.age" class="w-full">
            </ng-template>
            <ng-template pTemplate="output">
              {{row.age}}
            </ng-template>
          </p-cellEditor>
        </td>
        <td class="flex gap-2">
          <button *ngIf="!editing" pButton pRipple icon="pi pi-pencil" class="p-button-sm p-button-primary" (click)="onEditRow(row)"></button>
          <button *ngIf="editing" pButton pRipple icon="pi pi-check" class="p-button-sm p-button-success" (click)="onSaveRow(row)"></button>
          <button *ngIf="editing" pButton pRipple icon="pi pi-times" class="p-button-sm p-button-danger" (click)="onCancelEdit(row)"></button>
          <button pButton pRipple icon="pi pi-trash" class="p-button-sm p-button-danger" (click)="deleteRow(index)"></button>
        </td>
      </tr>
    </ng-template>
  </p-table>
</div>

TypeScript组件部分 #

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

interface User {
  name: string;
  email: string;
  age: number;
  editing?: boolean;
}

@Component({
  selector: 'app-editable-table',
  templateUrl: './editable-table.component.html',
  styleUrls: ['./editable-table.component.scss']
})
export class EditableTableComponent {
  tableData: User[] = [
    { name: '张三', email: 'zhangsan@example.com', age: 28 },
    { name: '李四', email: 'lisi@example.com', age: 32 }
  ];

  // 新增一行
  addNewRow() {
    const newRow: User = { name: '', email: '', age: 0, editing: true };
    this.tableData.push(newRow);
    // 手动触发表格刷新，确保新行的编辑状态生效
    setTimeout(() => {
      const table = document.querySelector('p-table')?.componentInstance;
      table?.reset();
    }, 0);
  }

  // 开启编辑模式
  onEditRow(row: User) {
    row.editing = true;
  }

  // 保存编辑内容
  onSaveRow(row: User) {
    row.editing = false;
    // 这里可以添加调用后端接口保存数据的逻辑
    console.log('保存数据:', row);
  }

  // 取消编辑
  onCancelEdit(row: User) {
    row.editing = false;
    // 如果是未输入内容的新增行，取消时直接删除避免空行
    if (!row.name && !row.email && row.age === 0) {
      const index = this.tableData.indexOf(row);
      if (index !== -1) {
        this.tableData.splice(index, 1);
      }
    }
  }

  // 删除行
  deleteRow(index: number) {
    this.tableData.splice(index, 1);
  }
}

必要的模块导入（在你的NgModule中） #

import { TableModule } from 'primeng/table';
import { ButtonModule } from 'primeng/button';
import { InputTextModule } from 'primeng/inputtext';

@NgModule({
  imports: [
    // ...其他业务模块
    TableModule,
    ButtonModule,
    InputTextModule
  ]
})
export class YourFeatureModule { }

• 新增行：点击按钮时创建空数据对象并标记为编辑状态，这样新增后直接进入可输入模式；用setTimeout触发表格刷新是为了确保PrimeNG能识别新行的编辑状态。
• 行内编辑切换：通过自定义的row.editing属性控制视图状态，配合PrimeNG的pEditableRow和p-cellEditor组件实现单元格的输入/展示切换。
• 删除行：通过行索引直接从数据数组中移除对应元素，PrimeNG表格会自动同步更新视图。
• 编辑保存/取消：保存时关闭编辑状态，可在此处添加后端数据提交逻辑；取消时自动清理未输入内容的新增空行，避免界面冗余。

• 如果需要数据验证，可以在onSaveRow中添加表单校验逻辑，或者替换输入框为PrimeNG的InputMask、Dropdown等组件，适配不同数据类型的需求。
• 样式上可以利用PrimeNG内置的Flex布局类（比如flex gap-2）调整操作按钮的间距，让界面更整洁美观。

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