Element ui在重置表单时需要特别注意
非弹窗情况下
1.指定表单的ref是否正确
<el-form :model="form" ref="ruleForm" >
</el-form>
2.确定重置的表单的<el-form-item></el-form-item>是否设置了prop属性（多数是因为忽略了这一步）
例如：我们需要清空当前的登陆表单
//页面部分
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" >
<el-form-item label="用户名：" prop="userName">
</el-form-item>
<el-form-item>
<el-button @click="resetForm('ruleForm')">重置</el-button>
</el-form-item>
</el-form>
//事件部分
resetForm(formName)
{
this.$refs[formName].resetFields();
}
弹窗情况下
场景：比如我们需要做一个新增和修改的弹窗，相信各位前端大佬们肯定会把这个弹窗抽出做成一个公共组件，再去写对应功能的时候就会方便许多，但是当我们做成公共组件后，点击编辑，好的没问题，点击新增，诶这个内容是什么情况，这不是上次点击的出现的数据吗？
喔 天哪，新增的表单里怎么也被提交了，相信大家与遇见这个问题以后肯定会想，在新增的时候给他清空表单就完美解决了，但是当我们去调用resetFields（）方法的时候会发现没有作用，检测了一下代码跟上面没用弹窗的时候一样的啊，为什么没有生效呢？
原因如下：
1.resetFields方法是将form表单的数据设置为初始值但是这个初始值是在form的 mounted生命周期
被赋值上去的的resetFields方法才会有效，这里继续我们对于VUE的生命周期钩子有一定的了解
他们在这个时候会将表单的数据进行赋值，所以在mounted周期之前赋值的resetFields方法将会无效
这时我们可以在mounted周期之后使用this.$nextTick （（）=>{进行表单赋值}）将回调延迟到下次DOM更新循环之后执行。在修改数据之后立即使用它，然后等待DOM更新。
实例代码：文章来源：https://www.toymoban.com/news/detail-802813.html
showLogin(data)
{
if (data.type == "add") {
this.logTitle = "添加";
} else if (data.type === "update") {
this.logTitle = "编辑";
//赋值的时候在这里将回调延迟到下次DOM更新循环之后执行
this.$nextTick(() => {
this.form.name = data.name;
this.form.age = data.age;
});
}
},这样一系列操作以后我们再去调用表单的重置表单就会生效啦文章来源地址https://www.toymoban.com/news/detail-802813.html
//重置表单的方法，接收参数为表单的ref指向
resetForm(formName)
{
this.$refs[formName].resetFields();
}到了这里，关于Element ui 重置表单resetField（）方法不生效的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
