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

问题

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

执行顺序分析

新增操作

打开页面：
- 页面加载时，表单的初始数据通常是空的或默认值。
点击“新增”按钮：
- 打开对话框，此时表单数据保持为空或默认值。
- 对话框内的表单组件是第一次挂载，其数据绑定的是初始值（通常是空字符串）。
- 因此，当调用 resetFields 时，表单将重置为初始值（空字符串），符合预期。

编辑操作

打开页面：
- 页面加载时，表单的初始数据通常是空的或默认值。
点击“编辑”按钮：
- 打开对话框，此时同步代码会将 formData 设置为从后端或其他来源获取的数据。
- 使用 nextTick 确保 DOM 更新后再设置表单数据。
- 对话框内的表单组件是第一次挂载，其数据绑定的是回显的数据。
- 当调用 resetFields 时，表单将重置为回显的数据，而不是空字符串，因此看起来没有被重置。

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

解决方案

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

使用独立的表单数据对象：
- 在编辑时，使用一个新的数据对象来存储回显的数据，而不是直接修改原始的 formData。
在编辑时清空数据：
- 在打开编辑对话框时，先清空 formData，然后再设置回显的数据。
手动设置初始值：
- 在重置表单时，手动设置表单字段的值为初始值。

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

// 打开对话框并设置表单数据
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 = {}; // 清空 formDataformRef.value.resetFields();
};
</script>