使用 Primevue 的数据表检测无效数据时，如何保持编辑器模式打开？

Question

我正在使用 Primevue Datatable，它有一个行编辑模式，可以让你添加一列来控制数据更改，首先它会显示一个按钮来打开编辑模式，然后当它打开时，它会显示保存和取消按钮。因此，该组件具有三个与每个事件关联的事件。

我想在检测到无效字段时保持编辑模式打开，以便用户可以填写这些字段，确认保存并在本地更新数据，然后再调用网络服务来更新数据库中的更改。

<DataTable editMode="row" @rowEditSave="saveRow">
  <Column :rowEditor="true">
</DataTable>

...

const saveRow = (event) {
  // Validate Data
  if( isDataInvalid(event.data) ) {
    // show Toast error message
   // keep edit mode ON
    event.preventDefault();
  } else {
    // webservice
    updateData( event.data )
  }
}

问题是我找不到防止保存行事件更新错误数据的方法，我添加了“p-invalid”class 以用红色边框指示无效字段，但是当我点击保存按钮时，它会关闭编辑模式并在本地保存无效数据。

我们将不胜感激。

Answer 1

根据文档：

"行编辑是通过设置 cellEdit （我认为它们的意思是“editMode”） 定义为“行”，定义 editingRows 与v-model 指令保存对编辑行的引用 并添加行编辑器列以提供编辑控件。请注意，因为 editingRows 启用了双向绑定 ，您可以使用它在编辑更多 或以编程方式切换行编辑 ."

时最初显示一行或多行

因此，在您处理 @rowEditSave 事件的方法中，进行任何必要的验证，如果验证失败，则将事件中传递的数据分配回 editingRows：

saveRow(event) {
  console.log(event.data);

  this.editingRows = [...this.editingRows, event.data];

  console.log(this.editingRows);
},

确保在配置数据表时指定 v-model editingRows：

v-model:editingRows="editingRows"

使用 Primevue 的数据表检测无效数据时，如何保持编辑器模式打开？

How do I keep editor mode ON when detecting invalid data with Primevue's Datatable?

javascript

datatable

primevue

vuejs3

vue-composition-api