在p-dataTable (Primeng)中添加具有编辑和删除选项的动作列,可以通过以下步骤实现:
data: any[] = [
{ name: 'John', age: 25 },
{ name: 'Jane', age: 30 },
{ name: 'Bob', age: 35 }
];
<p-dataTable [value]="data">
<ng-template pTemplate="header">
<tr>
<th>Name</th>
<th>Age</th>
<th>Actions</th> <!-- 添加动作列 -->
</tr>
</ng-template>
<ng-template pTemplate="body" let-row>
<tr>
<td>{{row.name}}</td>
<td>{{row.age}}</td>
<td>
<button pButton icon="pi pi-pencil" (click)="editRow(row)"></button> <!-- 编辑按钮 -->
<button pButton icon="pi pi-trash" (click)="deleteRow(row)"></button> <!-- 删除按钮 -->
</td>
</tr>
</ng-template>
</p-dataTable>
editRow(row: any) {
// 编辑逻辑
}
deleteRow(row: any) {
// 删除逻辑
}
这样,你就可以在p-dataTable中添加具有编辑和删除选项的动作列了。根据你的具体需求,可以进一步定制动作列的样式和功能。
领取专属 10元无门槛券
手把手带您无忧上云