PrimeNG 表：以编程方式处理行编辑 (pSaveEditableRow)

Question

我正在使用 PrimeNG 表，并且我想以编程方式处理保存行编辑，以防在编辑模式下存在任何需要事先解决的自定义验证错误。目前，我已将 pSaveEditableRow 添加到一个按钮，单击该按钮即可结束行编辑并保存对该行所做的编辑。我需要覆盖它并预先进行一些验证。如何才能做到这一点？

我查看了 PrimeNG 的文档，看起来我可以调用“saveRowEdit”函数，但我需要传递 rowData 和 rowElement，它们都来自 pEditableRow，并且 pEditableRow 似乎设置为具有表所需属性的对象。

参考文献： https://github.com/primefaces/primeng/blob/b3e7b3582f98936e0cddcafc921c61a9eabf9bcd/src/app/components/table/table.ts#L1883

https://github.com/primefaces/primeng/blob/b3e7b3582f98936e0cddcafc921c61a9eabf9bcd/src/app/components/table/table.ts#L3807

Answer 1

对于那些想要手动结束行编辑模式的人，我找到了一个解决方案：

1. pSaveEditableRow从您的标签中删除button（如果您已添加它）。正如文档所述，pSaveEditableRow只需将行切换回查看模式即可。

2. 添加#htmlTableRowElement到您的<tr>标签：<tr [pEditableRow]="rowData" #htmlTableRowElement>...</tr>

3. 将rowData和htmlTableRowElement传递给标签(click)上的函数button。

4. 添加import { Table } from 'primeng/table'到您的组件。

5. 添加@ViewChild('dt', { static: false }) table: Table到您的组件。

6. 添加#dt到您的<p-table>：<p-table #dt>...</p-table>

7. 您现在可以调用this.table.saveRowEdit(rowData, htmlTableRowElement)在单击按钮时调用的函数。这将结束该行的编辑模式并将其置于查看模式。rowData是 any 的类型（包含行数据的对象），并且htmlTableRowElement非常不言自明。

希望这可以帮助！