el-form表单重置resetFields不生效

项目场景:

 前段时间遇到一个问题,当页面刷新之后,第一次先选择了一条数据打开了编辑弹窗,再关闭。之后再打开新增弹窗,原本应该是空的el-form表单还是刚刚打开编辑时的数据,而且我每次在关闭弹窗都会使用this.$refs[formName].resetFields()去重置el-form,所以这是什么情况造成的?


问题描述

在多次测试又发现:当第一次点击新增弹窗之后,之后的el-form表单重置都没有问题,只有第一次点击编辑才会有问题。


原因分析:

这是因为,当页面刷新后,我们第一次打开编辑弹窗时,el-dialog是懒加载的,这一行的数据对el-form进行了赋值,之后el-dialog才被渲染完成,里面的el-form才完成初始化,所以这个el-form表单使用this.$refs[formName].resetFields()进行初始化时每次都会生效,只不过初始化的值是第一次的数据。


解决方案:

 那么解决方法是什么?

只需要在el-dialog渲染完成之后,我们再进行赋值即可

this.visible = true 
setTimeout(()=>{
    this.form.name = row.name
    this.form.sex = row.sex
},100)
### 解决 `el-form` 在 Vue 3 中重置表单无效的问题 在 Vue 3 中遇到 `el-form` 的 `resetFields()` 方法无法正常工作的情况,通常是因为组件生命周期的变化以及响应式对象的更新机制不同所致[^1]。 当调用 `resetFields()` 方法时,如果发现字段未被正确清除,则可以尝试以下几种方法来解决问题: #### 使用 ref 获取 Form 实例并手动触发重置 确保通过模板引用获取到 form 组件实例,并在其上调用 `resetFields()` 函数。这可以通过给 `<el-form>` 添加一个唯一的 `ref` 属性实现,之后可以在脚本部分访问这个引用来进行操作。 ```html <template> <div> <!-- 将 'form' 设置为 el-form 的 ref --> <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleFormRef"> ... </el-form> <button @click="handleReset">重置</button> </div> </template> <script setup> import { ref } from 'vue'; // 定义 ruleForm 和 rules... const ruleFormRef = ref(null); function handleReset() { if (!ruleFormRef.value) return; // 调用 resetFields 来清空表单项 ruleFormRef.value.resetFields(); } </script> ``` #### 更新依赖版本兼容性 有时问题可能源于所使用的 Element Plus 或其他相关包之间的不兼容。确认所有安装的软件包都是最新稳定版或至少相互之间保持良好的协作关系非常重要。对于特定版本间的差异,查阅官方文档或 GitHub 发布说明可能会提供有用的信息。 #### 检查数据绑定方式 由于 Vue 3 更改了 Composition API 下的数据管理逻辑,在某些情况下可能导致旧有的 Options API 方式的代码不再适用。因此建议检查当前项目采用的是哪种API风格编写,并相应调整状态管理和事件监听器设置以适应新特性。 #### 示例代码片段展示如何正确初始化和重置表单 下面给出一段完整的例子用于演示上述提到的技术要点: ```html <template> <div class="demo-ruleForm"> <el-form :model="dynamicValidateForm" :rules="rules" ref="dynamicValidateFormRef"> <el-form-item prop="email"> <el-input v-model="dynamicValidateForm.email"></el-input> </el-form-item> <!-- 其他输入项 --> <el-button type="primary" @click.prevent="submitForm()">提交</el-button> <el-button @click="resetForm()">重置</el-button> </el-form> </div> </template> <script setup> import { reactive, ref } from 'vue'; let dynamicValidateFormRef = ref(); const dynamicValidateForm = reactive({ email: '' }); const submitForm = () => { console.log('Submit!'); }; const resetForm = async () => { await nextTick(); // 确保 DOM 已经完成渲染 if (dynamicValidateFormRef.value !== null && typeof dynamicValidateFormRef.value.resetFields === 'function') { dynamicValidateFormRef.value.resetFields(); } }; </script> ```
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值