elementUI弹窗里的表单重置不生效问题解决
还有最后一个小模块项目马上就做完了，最一个模块比较简单，还是一个表格，表格每一行的最后有两个按钮，修改和删除，新增按钮则在表格外面。点击修改和新增按钮可以弹出一个表单弹窗。修改可以回显某一行的数据到输入框。本来回显什么都没问题，等我自己测试才发现点击修改后再点击新增，表单里的输入框里回显的数据没有清空。
第一想法是点击修改后给输入框赋值，但是关闭弹窗后没有清空表单数据，所以导致点击新增时，输入框数据仍在。所以要在弹窗关闭时，清空表单数据。
给弹窗添加关闭时的事件：
<el-dialog id="AddDialog" title="弹窗标题" :visible.sync="dialogVisible" width="55%" top="10vh" show-close @close="handleClose"> <!--@close="handleClose" 添加关闭时的监听事件-->
method:{
handleClose(){
this.$refs.dialogForm.resetFields();
this.dialogVisible = false;
}
}
//注：表单重置一定要添加prop属性和ref属性。prop属性绑定输入框绑定的值，ref不能和其他表单重复
本以为这么做就已经好了，等到自己测试的时候发现点击修改后再点击新增，重置按钮好像没有生效，但是又好像生效了，就再往上查了下，才知道问题出现在哪。
先说this.$refs.dialogForm.resetFields();的作用：对整个表单进行重置，将所有字段值重置为初始值并移除校验结果
注意是所有字段值是重置为初始值，而不是清空值。
有什么区别呢，就比如我刚做的，因为表单是在弹窗里，弹窗默认是关闭状态，里面的数据没被初始化，新增和修改都可以打开弹窗，如果先点击的是新增，表单里的值初始化就是为空的，空就是初始值，但是如果先点击的是修改，表单里的初始值就是打开的回显的数据。
这就是为什么重置有时生效有时又不生效，而有时又好像部分生效的原因。
找到原因后就要找到解决办法，
//修改方法
amend(code) {
this.dialogVisible = true;
this.$nextTick(() => {
// 注意看这里
以下是回显方法
})
}
this.$nextTick()将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一样，不同的是回调的 this 自动绑定到调用它的实例上。
然后再次点击就发现问题已经解决了。
到此这篇关于elementUI弹窗里的表单重置不生效问题解决的文章就介绍到这了,更多相关element 表单重置不生效内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
使用vue官方提供的模板vue-cli搭建一个helloWorld案例分析
这篇文章主要介绍了用vue官方提供的模板vue-cli搭建一个helloWorld案例,需要的朋友可以参考下2018-01-01
这篇文章主要介绍了vue监听路由变化的几种方式小结，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-05-05
Vue 通过this.$emit()方法子组件向父组件传值(步骤分享)
这篇文章主要介绍了Vue this.$emit()方法通过子组件向父组件传值,第一步在父组件中引入子组件，第二步子组件向父组件传值，本文通过需要的朋友可以参考下2022-11-11
vue中$refs, $emit, $on, $once, $off的使用详解
这篇文章主要介绍了vue中$refs, $emit, $on, $once, $off的使用详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-05-05
跨域问题的出现是因为浏览器的同源策略问题，如果没有同源策略我们的浏览器将会十分的不安全，随时都可能受到攻击，今天小编通过本文给大家介绍下vue 处理跨域问题，感兴趣的朋友一起看看吧2021-09-09
Vue3 使用Element Plus表格单选带checkbox功能
这篇文章主要介绍了Vue3 使用Element Plus表格单选带checkbox,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友参考下吧2023-11-11
vue.js过滤器+ajax实现事件监听及后台php数据交互实例
这篇文章主要介绍了vue.js过滤器+ajax实现事件监听及后台php数据交互,结合实例形式分析了vue.js前台过滤器与ajax后台数据交互相关操作技巧,需要的朋友可以参考下2018-05-05
这篇文章主要介绍了关于Vue3&TypeScript的踩坑汇总，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
vue-seamless-scroll无缝滚动组件使用方法详解
这篇文章主要为大家详细介绍了vue-seamless-scroll无缝滚动组件的使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
这篇文章主要介绍了详解VueJS 数据驱动和依赖追踪分析，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-07-07
最新评论