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

已于 2022-03-02 17:46:43 修改
阅读量736 收藏
点赞数
文章标签： elementui html5 html
于 2021-09-04 19:31:25 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43846574/article/details/120104461
版权

问题

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
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Ant Design Vue 的 formRef.value.resetFields() 不生效
qwe122343的博客
03-18 4117
从 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 3095
弹出这个错误大概是因为第一次点击弹框的时候弹框内本来就是初始值，并不需要 reset，所以可以在使用 resetFields 之前增加一个判断条件。// 添加按钮-打开。
element-ui 表单清空使用resetFields() 无效问题
weixin_48624392的博客
03-16 855
resetFields() 无效
el-form的重置表单（resetFields()）不生效的其他原因
最新发布
qq_40417349的博客
03-04 759
经过反复测试，还有一种情况也会导致resetFields失效，如下代码中，在el-form与el-col标签之间还添加了一个template标签，原本用于数据加载时不显示表单内容，但是，经过反复测试发现，它在这个位置会导致resetFields重置表单数据操作失效，具体原因还不清楚；将其删除之后，resetFields操作生效。近日我也遇到了el-form的重置表单（resetFields()）方法不生效的问题，网上查找了很多解答，反复检查我的写法实际上都是符合使用规则的，但是还是不生效，好生奇怪。
Vue 解决通过this.$refs来获取DOM或者组件报错问题
10-15
然而，在某些情况下，尝试通过`this.$refs`获取DOM或组件时可能会遇到错误。本文将深入探讨这个问题及其解决方案。 1. **关于`this.$refs`的使用场景** - **普通元素**：当`ref`属性添加到HTML的普通元素上时，`...
vue列表单项展开收缩功能之this.$refs的详解
10-17
下面我们将深入探讨如何使用`this.$refs`以及在实现列表展开收缩功能时的关键步骤。 首先，我们要明白`this.$refs` 的用法。在Vue模板中，我们可以在元素或组件上添加一个`ref`属性，它的值可以是字符串或对象。当...
this.$toast() 了解一下？
12-03
为了在全局范围内使用`this.$toast()`，我们需要在Vue实例的原型链上添加这个方法。首先，我们创建一个简单的`Toast`组件，如下所示： ```html <!-- Toast.vue --> <p>{{ content }} export default { ...
【记录】vue+element使用resetFields重置，保存表单会出现一闪而过上次赋的值
灵活的小胖砸
04-01 1165
resetFields作用实际上是将表单元素置为初始值 使用resetFields清空表单，有时候会出现再次打开表单，还是会出现上一次的值的情况 解决方案 1.在打开弹窗时，在$nextTick中赋值，因为此时Dialog已经初始化（已经mounted） confirmEdit(row) { console.log(row, '编辑') this.dialogVisible = true this.$nextTick(() => { this
vue3 antd项目实战——Form表单的重置【使用resetFields()重置form表单数据、清空输入框】
热门推荐
XSL_HR的博客
12-31 1万+
ant design vue组件库中的form表单有一个自带的重置函数——resetFields()。本期文章将借助resetFields函数，实现form表单的重置与清空。
Vue表单重置，条件清空。this.$refs[name].resetFields()；
天青色等烟雨
09-06 2402
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 1857
this.$refs.ruleForm.resetFields() 这是用来清空表单的代码，实际使用可以放在显示操作成功的代码下面，在接口调用成功后执行。 出处是：
关于resetFields重置表单至初始状态的问题
sinat_41200024的博客
01-31 4655
之前在项目遇到一个问题： 当我点击第一行数据的“修改”后会弹窗， 当我在弹窗中点“确定”按钮后，页面总是会闪现第一次点的那行数据，后来发现我是用了form表单中的resetFields这个方法， 当初用这个方法是想移除校验，但没注意到他会将其置为初始值。 后来取消使用这个方法，然后改成下面这个专门移除校验的方法就可以解决问题了，如下 ： 好了问题完美解决了，现在页面不再会闪现上一次出现...
this.$refs[‘form‘].resetFields()方法重置表单无效的坑
m0_67391870的博客
03-05 1193
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 4959
    ​ &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="
vue3+element-plus 弹框表单重置(resetFields)失效、无效解决
我不是程序员的博客
10-13 5208
一个弹框同时实现新增、修改功能。点击修改时赋值到弹框里面的表单，点击新增弹框里面表单都是无值，表单修改再新增重置无效
vue + elementui表单重置 resetFields 问题 点击重置没有重置也没有报错问题
Z_Gleng的博客
02-09 868
问题： elementui在重置表单时，无法使用this.$refs[‘formRefVal’].resetFields()清空表单数据; 解决方法： 1、表单加ref属性 <el-form ref="refname"></el-form> 2、form的每个item加prop属性（这个是比较容易忘记的地方,需要和绑定数据的最后名称一致，prop属性添加到form-item上） <el-form-item prop="name"> &l
新增，编辑，详情用了同一个表单，每次打开都有上次的值
我爱美女S的博客
10-19 822
新增，编辑，详情用了同一个表单，每次打开都有上次的值
resetForm() { this.$refs.form.resetFields(); },
05-29
它的作用是重置表单数据，将表单中的所有输入框清空并还原为初始值。 具体来说，这个方法使用了 `$refs` 对象来获取组件中名为 `form` 的子组件，并调用其 `resetFields()` 方法，将表单中的所有输入框清空并还原为...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值