关于element-ui resetFields重置方法无效问题及解决
更新时间：2022年08月12日 11:06:04 投稿：jingxian
这篇文章主要介绍了关于element-ui resetFields重置方法无效问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
element-ui resetFields重置方法无效
目前发现resetFields()，有以下两种情况可能会导致失效：
情况1.el-form-item没有加上prop属性
需要重置的表单项el-form-item必须要加上prop属性，并且prop属性的值必须和数据双向绑定的值最后面保持一致
element-ui 提供的文档如图：
图例如下：
情况2.在mounted之前给表单赋值（mounted DOM未挂载完成）
在mounted之前赋值会被当成是初始值，而resetFields方法是将值重置为初始值而不是清空。所以导致没有清空数据。
解决办法
法一：表单在mounted再赋值
法二：使用this.$nextTick(() => { // 这里开始赋值 this.form.xx = xx; })
element-ui表单重置函数resetFields();使用注意事项
在表单重置的时候我们习惯使用this.$refs[formName].resetFields();来重置表单，但有时候会出现重置不完全的情况，例如：
表单绑定的变量：
formData:{ id:null, name:null , age:null}表单html：
<el-form ref="form" :model="formData" label-width="80px" size="mini"> <el-form-item label="姓名"> <el-input v-model="formData.name"></el-input> </el-form-item> <el-form-item label="性别"> <el-input v-model="formData.age"></el-input> </el-form-item> </el-form>
当我们在编辑的时候会从后台返回数据回填formData（有id），
当我们使用 this.$refs[‘form’].resetFields();重置表单的时候，不能把id重置成null（因为表单html中没有引用id项，所以重置的时候不能把formData.id重置），如果要把id重置成null，这个时候就要手动重置formData.id
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
Vue2.0中三种常用传值方式(父传子、子传父、非父子组件传值)
在Vue的框架开发的项目过程中，经常会用到组件来管理不同的功能，有一些公共的组件会被提取出来。下面通过本文给大家介绍Vue开发中常用的三种传值方式父传子、子传父、非父子组件传值，需要的朋友参考下吧2018-08-08
这篇文章主要介绍了Vue如何实现打包资源按时间戳方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-05-05
下面小编就为大家分享一篇vue中阻止click事件冒泡,防止触发另一个事件的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-02-02
懒加载简单来说就是延迟加载或按需加载，即在需要的时候的时候进行加载。这篇文章主要介绍了vue路由懒加载及组件懒加载 ,需要的朋友可以参考下2019-06-06
vue filter 过滤器处理数据的作用,使用位置:mustache插值和v-bind表达式，过滤器用于文本转换,复杂的数据处理则用computed，这篇文章主要介绍了Vue中的过滤器（filter）,需要的朋友可以参考下2022-11-11
这篇文章主要介绍了详解Vuex下Store的模块化拆分实践，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-07-07
vue3.0使用vue-pdf-embed在线预览pdf 控制页码显示范围不生效问题解决
这篇文章主要介绍了vue3.0使用vue-pdf-embed在线预览pdf 控制页码显示范围不生效问题的问题及解决方法，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友参考下吧2023-01-01
这篇文章主要介绍了详解vantUI框架在vue项目中的应用踩坑,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-12-12
Vue的Router是一个用于实现页面跳转和路由管理的插件,它可以帮助我们根据不同的URL请求加载不同的组件,以及实现前端路由功能,本文给大家介绍vue中的Router基本配置命令,感兴趣的朋友跟随小编一起看看吧2024-02-02
Vue Router路由hash模式与history模式详细介绍
Vue Router是Vue.js官方的路由管理器。它和Vue.js的核心深度集成，让构建单页面应用变得易如反掌。路由实际上就是可以理解为指向，就是我在页面上点击一个按钮需要跳转到对应的页面，这就是路由跳转2022-08-08
最新评论