【前端】解决element-ui的form组件resetFields()方法不生效的问题

9月前作者：RogerQianpeng 分类：Toy博客阅读(54) 违法举报

这篇具有很好参考价值的文章主要介绍了【前端】解决element-ui的form组件resetFields()方法不生效的问题。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

问题

使用element-ui的form组件，在输入栏较多的时候，有时resetFields只能重置一部分输入框的值

解决

给每个值赋值初始值为空即可
例如，需要清除的:model="queryForm.bgnTime"、:model="queryForm.endTime"等一系列的值，那么就不要只定义queryForm:{}，而是要把对象下的各个属性赋值初值为空
再使用this.$refs.queryForm.resetFields()之类的方法

原因

【前端】解决element-ui的form组件resetFields()方法不生效的问题,前端,前端,ui,javascript,vue.js

可能的原因是，resetFields只是将字段值重置为初始值，当要初始化的值较多且均未明确确定初始值时，可能会有一定的异常出现em
如果有大佬了解更深入的原因的话，愿闻其详文章来源地址https://www.toymoban.com/news/detail-606444.html

到了这里，关于【前端】解决element-ui的form组件resetFields()方法不生效的问题的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：

领支付宝红包赞助服务器费用

解决 element-ui 中From 表单和Dialog 对话框搭配使用时 resetFields重置方法无法清空数据的问题

在实际开发实现表格的增删改查的时候，新增和修改通常共用一个弹窗以节省代码量当我们先点击修改的时候，会对弹窗表单进行赋值，这个时候我们再点击新增，会发现刚刚的表单数据仍然躺在表单中，并且使用resetFields没有清除数据其实resetFields()是生效了的，resetFie

2024年02月16日
浏览(53)
element-ui form表单，select多选时，初始自动校验问题解决

使用 el-select 多选框配置表单校验时，如果绑定值为空字符串，表单中的多选下拉框会自动执行校验并提示红色文字提示，体验非常不好；原因：form表单-value1默认为空字符串改为空数组即可解决

2024年02月13日
浏览(40)
[vue+element-ui] form中输入框无法输入问题的解决方法

目录一.问题发现：二.正确案例与错误原理：三.问题解决笔者在制作登录页面前端时使用elementui+vue技术，发现输入框无法输入任何内容。在csdn上查阅很多文章后发现都无法解决，于是去elementui官网进行反复查看才发现问题所在。最终发现问题是input标签中v-model写的不恰

2024年02月02日
浏览(52)
Element-UI中el-form内部在输入框回车导致刷新页面的问题解决。

当 el-form 表单里面只有一个 el-input 输入框的时候，在输入框选中时按回车会刷新页面：默认情况下， el-form 中只有一个输入框时， el-form 会自动为输入框添加一个 type=\\\"submit\\\" 的按钮，当按下回车键时，该按钮会触发表单的提交事件。在el-form标签内加入 @submit.native.prevent 即可

2024年02月11日
浏览(58)
解决idea无法识别element-ui组件

现象：在创建一个新的web项目时，引入了element-ui组件， package.json中相关配置如图然而在vue的开发中，却无法识别element-ui的组件，具体表现为：无法自动补全，黄色warning提示，未知HTML标记。不过，虽然这么标记了但是页面运行没有任何问题。功能也都正常。解决方法：

2024年02月02日
浏览(37)
element-ui 组件图标全变成方框解决方法

问题：element-ui中的icon都变成了框我的原因是在build下的webpack.base.conf.js中多了个woff元素去掉这个woff之后就可以了：我以为到此问题就解决了，但是当我打包后发现还是框框。。。。。解决办法:在build文件中找到utils.js 加上一行 publicPath：\\\'../../\\\' 就可以解决了

2024年02月13日
浏览(45)
element-ui关于获取from表单项整个对象的方法，以及this.$refs[formName].resetFields()清除失效情况

也就是表单验证时出现的几个坑：第一： el-form 表单绑定的动态属性，而不是 v-model 双向绑定第二： el-form-item 表单项是里面才是 el-input 输入框和单选之类。第三：注意的是：表单需要： ref=\\\"form\\\" :model=\\\"form\\\" ，特别注意是表单项： prop=\\\"input\\\" ，必须是，绑定的对象from里面的

2024年02月15日
浏览(34)
vue前端直接使用element-ui的upload组件上传到阿里云OSS存储

因为公司的服务器比较拉吧，所以老大决定将数据文件等上传到阿里云服务器，通过ali-oss方式，这样的话读取文件也比较快（能看到这说明什么安装element-ui都会了，我就不详细介绍了，直接跳过）在执行下面操作之前，你要确定你的阿里云能看到上边这个页面这里主

2024年02月10日
浏览(63)
Vue3+Element Plus 关于Dialog弹出Form表单，使用resetFields重置无效的解决

主要参考了element-plus官方的表单重置按钮（官方Form例子任意reset按钮），然后试了试他的ref绑定，发现可以完美解决重置问题。第一步：给Form表单绑定ref。绑定ref 的值为refFormInstance();这里注意表单el-form-item必须有prop属性。 2.第二步：在你想要重置的地方调用重置表单方法

2024年01月21日
浏览(48)
小白都会的前端技能---修改element-ui里面的tree组件的icon图标

在树形组件中,我们渲染到页面上通常来表示一个组织架构的流程,但一般在做的时候会设置打开和关闭为两个不同的字体图标并且在点击的时候可以切换如下效果图: 打开之前是小加号图标,打开之后是小减号图标具体方法: 使用element-ui组件设置样式: icon-class =\\\"图标类名\\\"可

2023年04月18日
浏览(42)