vue+elementui(对话框中form表单的reset问题)
更新时间：2022年05月27日 10:02:40 作者：你回头我就在
这篇文章主要介绍了vue+elementui(对话框中form表单的reset问题)，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
对话框中form表单的reset问题
一般在新增和编辑的时候用的都是同一个对话框和form表单，而在先点击编辑的时候form表单的resetfileds函数就会失效
解决原理
实际上结构是（通过vue类比）
data里面有一个form表单的初始值，methods里面定义了一个resetfileds的函数resetfileds函数的作用:记录在mounted生命周期执行之前最后一次form表单中对象的值,并且重新开启效验
在mounted周期中resetfileds函数会自动执行一次
实际运行：当第一次点开dialog的时候，form对象第一次被创建，dom加载，即自动运行一次resetfileds函数（此时已经记录了初始值）
在后面当再一次调用resetfileds函数的时候就会把函数中记录的对象值赋给form表单，所以如果是先点击编辑的情况下，form表单在点击新增时不会清空数据
解决办法
1：可以再新增时手动清除数据（缺点：此时resetfileds函数中记录的值并没有改变，还是当时第一次点击编辑的时候赋的值，但不影响使用）
2：第一次加载dom时如果要修改data中定义的form对象值，那么要将修改操作放在form表单dom元素加载完以后，即mounted生命周期之后（比较推荐的方式）
代码：第一次加载dom时如果要修改data中定义的form对象值，放在$nextTick中执行（即等待resetfileds函数执行以后再去把编辑或者新增的值赋值给form表单，这样子，resetfileds函数记录的就是form表单中data定义的初始化值）
element UI form表单重置无效
element 组件库里面重置有两个方法resetField和clearValidate，但是这两个方法，要用这两个方法肯定是要用ref实例化一个表单，用实例化的对象去重置表单，但是经常性的无效
实例化是
<el-form ref="operateForm" :model="form" :rules="rules">
使用方式经常是
this.$refs['operateForm'] && this.$refs['operateForm'].clearValidate()
说下解决
resetForm() { // 注意：在这个方法中重置
this.image = []
this.form = {
images: []
}
}手动重置表单数据，然后用方法去重置规则状态
this.$refs['operateForm'] && this.$refs['operateForm'].clearValidate() //注意：在进到表单之前重置，我这边的话是弹框，我写在打开弹框的方法中的
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要为大家详细介绍了vue实现可移动的悬浮按钮，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-03-03
Cesium是一个用于创建高性能、跨平台的3D地球和地图的开源JavaScript库,它提供了许多功能,包括地理空间数据可视化、地理定位和地图导航等,这篇文章主要介绍了vue cesium加载点与定位到指定位置,需要的朋友可以参考下2024-03-03
今天小编就为大家分享一篇浅谈vue方法内的方法使用this的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
本系列文章介绍一个简单的实时定位示例，基于VUE + OPENLAYERS实现实时定位功能，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友参考下吧2021-09-09
这篇文章主要介绍了vue 设置背景颜色及透明度的操作，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2021-06-06
本文主要介绍了vue3+pinia用户信息持久缓存token的问题解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2023-07-07
这篇文章主要介绍了关于VueRouter导入的全过程，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
vue + typescript + 极验登录验证的实现方法
这篇文章主要介绍了vue + typescript + 极验 登录验证的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-06-06
这篇文章主要介绍了Vue引入jquery实现平滑滚动到指定位置的效果，非常不错，具有一定的参考借鉴价值，需要的朋友参考下吧2018-05-05
由于前端项目使用的是Vue.js和bootstrap整合开发,中间用到了select下拉框,这篇文章主要给大家介绍了关于前端Vue select下拉框使用以及监听事件的相关资料,需要的朋友可以参考下2024-03-03
最新评论