Element-plus el-form、el-dialog 数据回显同时用时，重置失效问题

问题

当第一次打开网页并点击“编辑”按钮时，虽然对话框变量变为 true 使对话框可见，但同步代码会将 formData 对象的属性设置为默认值。由于 Vue 的异步更新机制，DOM 实际上还未更新，因此表单组件内绑定了这些有值的初始数据。这样，在后续调用 resetFields 方法时，表单将会重置为这些默认值而不是空值。

执行顺序分析

新增操作

1. 打开页面：

   • 页面加载时，表单的初始数据通常是空的或默认值。

2. 点击“新增”按钮：

   • 打开对话框，此时表单数据保持为空或默认值。
   • 对话框内的表单组件是第一次挂载，其数据绑定的是初始值（通常是空字符串）。
   • 因此，当调用 resetFields 时，表单将重置为初始值（空字符串），符合预期。

编辑操作

1. 打开页面：

   • 页面加载时，表单的初始数据通常是空的或默认值。

2. 点击“编辑”按钮：

   • 打开对话框，此时同步代码会将 formData 设置为从后端或其他来源获取的数据。
   • 使用 nextTick 确保 DOM 更新后再设置表单数据。
   • 对话框内的表单组件是第一次挂载，其数据绑定的是回显的数据。
   • 当调用 resetFields 时，表单将重置为回显的数据，而不是空字符串，因此看起来没有被重置。

由以上分析可以得出：编辑时表单的初始值被设置成了回显的数据，而不是空字符串。当调用 resetFields 时，表单会回到上次设置的初始值，即回显的数据。

解决方案

要解决这个问题，可以采取以下几种方法：

1. 使用独立的表单数据对象：

   • 在编辑时，使用一个新的数据对象来存储回显的数据，而不是直接修改原始的 formData。

2. 在编辑时清空数据：

   • 在打开编辑对话框时，先清空 formData，然后再设置回显的数据。

3. 手动设置初始值：

   • 在重置表单时，手动设置表单字段的值为初始值。

以下是使用独立的表单数据对象的示例代码：

// 打开对话框并设置表单数据
const openDialogWithFormData = (row) => {
  configDialogVisible.value = true;
  let editFormData= JSON.parse(JSON.stringify(row));

  // 确保 DOM 更新后设置表单数据
  nextTick(() => {
    formData.value = editFormData
  });
};

// 重置表单
const resetForm = () => {
  if (!formRef.value) return;
  formData.value = {}; // 清空 formData
  formRef.value.resetFields();
};
</script>

nextTick 的作用

• nextTick 的主要作用是确保在下一次 DOM 更新周期之后执行指定的回调函数。因为 Vue.js 是异步更新 DOM 的，有时候我们需要在数据改变并且 DOM 完成更新之后执行某些操作，这时就可以使用 nextTick。