Elementui在重置表单时，无法使用this.$refs[‘formRefVal‘].resetFields()清空表单数据；

已于 2022-03-02 17:46:43 修改
阅读量840 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： elementui html5 html
于 2021-09-04 19:31:25 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_43846574/article/details/120104461
本文揭示了Element UI表单中resetFields方法失效的原因，即初次赋值导致的模型初始值问题，并提供了通过为表单项添加prop属性来修复的方法。官方文档和实例详解有助于理解并解决这一问题。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

问题

elementui在重置表单时，无法使用this.$refs[‘formRefVal’].resetFields()清空表单数据;**

原因

根据文档显示，resetFields是对整个表单进行重置，将所有字段值重置为空并移除校验结果。但是实际上resetFields是清空validateMessage，然后把值重置成了上一次初始化的值。

如果你编辑时，第一次打开dialog的时候给表单绑定的model赋值了，这时候这个model的初始值就变成了你所赋值的值，所以resetFields的时候，会将model对应的每个值重置到初始值，这时候的初始值就是你编辑时赋值的那个值。

解决办法：

form的每个item加prop属性，需要和绑定数据的最后名称一致
在这里插入图片描述
官方说明https://element.eleme.cn/#/zh-CN/component/form

Funchovy
关注
elementplus2. vue引用element-plus时清空表单的操作|重置表单|this.$refs[name].resetFields()；失效的做法
yangyangdt的博客
01-27 5628
vue引用element-plus时清空表单的操作|重置表单|this.$refs[name].resetFields()；失效怎么办？
【Vue3 + ElementUI】表单校验无效（写法：this.$refs[‘formName‘].validate((valid) =＞{} )）
weixin_47375144的博客
04-09 3163
el-form 中 校验 ，校验无效
Ant Design Vue 的 formRef.value.resetFields() 不生效
qwe122343的博客
03-18 4594
从 iView 转过来写 Ant Design Vue，还是有些不同的地方。比如在用 Form 表单时 发现清空表单功能竟然不好使了 <a-form :model="formState" :label-col="labelCol" :wrapper-col="wrapperCol" ref="formRef"> <!--没加name不生效！！相当于iView中的prop--> <a-form-item label="节点名称"> <a-input v
报错： formRef.value.resetFields is not a function
qq_44792224的博客
04-23 3901
弹出这个错误大概是因为第一次点击弹框的时候弹框内本来就是初始值，并不需要 reset，所以可以在使用 resetFields 之前增加一个判断条件。// 添加按钮-打开。
element-ui 表单清空使用resetFields() 无效问题
weixin_48624392的博客
03-16 992
resetFields() 无效
el-form的重置表单（resetFields()）不生效的其他原因
qq_40417349的博客
03-04 1187
经过反复测试，还有一种情况也会导致resetFields失效，如下代码中，在el-form与el-col标签之间还添加了一个template标签，原本用于数据加载时不显示表单内容，但是，经过反复测试发现，它在这个位置会导致resetFields重置表单数据操作失效，具体原因还不清楚；将其删除之后，resetFields操作生效。近日我也遇到了el-form的重置表单（resetFields()）方法不生效的问题，网上查找了很多解答，反复检查我的写法实际上都是符合使用规则的，但是还是不生效，好生奇怪。
vue使用深拷贝后，只用this.$refs.form.resetFields()无法重置表单的问题
最新发布
10-09
Vue中使用`this.$refs.form.resetFields()`方法通常可以用来清空表单的数据，但如果在组件的生命周期中进行了深度数据拷贝操作，比如使用了`JSON.parse(JSON.stringify(data))`这样的方式，新复制的对象和原始对象...
resetForm() { this.$refs.form.resetFields(); },
05-29
它的作用是重置表单数据，将表单中的所有输入框清空并还原为初始值。 具体来说，这个方法使用了 `$refs` 对象来获取组件中名为 `form` 的子组件，并调用其 `resetFields()` 方法，将表单中的所有输入框清空并还原为...
resetForm() { this.$refs.form.resetFields(); 解释这段代码
06-01
具体来说，`this.$refs.form` 是通过 `ref` 属性引用到组件中的 `<el-form>` 表单元素，`resetFields()` 方法是该表单元素上的一个内置方法，用于清空表单中的所有数据和验证状态。因此，当该方法被调用时，它会将...
vue3 antd项目实战——Form表单的重置【使用resetFields()重置form表单数据、清空输入框】
XSL_HR的博客
12-31 1万+
ant design vue组件库中的form表单有一个自带的重置函数——resetFields()。本期文章将借助resetFields函数，实现form表单的重置与清空。
【记录】vue+element使用resetFields重置，保存表单会出现一闪而过上次赋的值
灵活的小胖砸
04-01 1283
resetFields作用实际上是将表单元素置为初始值 使用resetFields清空表单，有时候会出现再次打开表单，还是会出现上一次的值的情况 解决方案 1.在打开弹窗时，在$nextTick中赋值，因为此时Dialog已经初始化（已经mounted） confirmEdit(row) { console.log(row, '编辑') this.dialogVisible = true this.$nextTick(() => { this
Vue表单重置，条件清空。this.$refs[name].resetFields()；
天青色等烟雨
09-06 2577
Vue表单重置，条件清空。this.$refs[name].resetFields(); 需要注意的是在form表单中，要添加【prop】 代码如下 <template> <div> <Form ref="formItem" :model="formItem" :label-width="80" inline> <FormItem label="名称" prop
Vue Element表单验证成功后，清空表单
XXX51129的博客
04-26 1964
this.$refs.ruleForm.resetFields() 这是用来清空表单的代码，实际使用可以放在显示操作成功的代码下面，在接口调用成功后执行。 出处是：
关于resetFields重置表单至初始状态的问题
sinat_41200024的博客
01-31 4770
之前在项目遇到一个问题： 当我点击第一行数据的“修改”后会弹窗， 当我在弹窗中点“确定”按钮后，页面总是会闪现第一次点的那行数据，后来发现我是用了form表单中的resetFields这个方法， 当初用这个方法是想移除校验，但没注意到他会将其置为初始值。 后来取消使用这个方法，然后改成下面这个专门移除校验的方法就可以解决问题了，如下 ： 好了问题完美解决了，现在页面不再会闪现上一次出现...
this.$refs[‘form‘].resetFields()方法重置表单无效的坑
m0_67391870的博客
03-05 1320
this.$refs[‘form’].resetFields()方法重置表单无效的坑 1、用法不对 要想this.$refs[‘form’].resetFields()方法有效，必须配置el-form :model 属性和el-form-item中的prop属性，才可以。 注意：this.$refs[‘form’].resetFields()这个做法其实是重置表单到初始值，不是清空表单，当表单第一次在页面中渲染时所用的数据就是初始数据。 2、坑1 在还没有显示对话框之前就调用this.$refs[‘form
对表单里面的字段进行截取,删除form表单里面的某个字段属性
菜鸟黑一枚
01-03 5082
    ​ &lt;template&gt; &lt;div class="content-container"&gt; &lt;div class="content-operate"&gt; &lt;el-form :inline="true" class="search-form-inline" label-position="
Element UI 中清除初始化数据为空时this.$refs[formName].resetFields()不起作用
热门推荐
你好，欢迎光临！
06-28 3万+
问题 在查询条件中，初始化时绑定手机号码值从cookie中获取，但是在清除表单的时候，只用this.$refs[formName].resetFields()无法清楚所有表单为空。 分析原因 this.refs[formName].resetFields()只是将查询条件初始化，所以在初始化时绑定什么值就还是什么值。如果想要清空指定的已绑定数据的表单元素，需要将清空的语句写在this.r...
vue3+element-plus 弹框表单重置(resetFields)失效、无效解决
我不是程序员的博客
10-13 6566
一个弹框同时实现新增、修改功能。点击修改时赋值到弹框里面的表单，点击新增弹框里面表单都是无值，表单修改再新增重置无效
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值