Element ui关闭el-dialog时如何清除数据
更新时间：2024年02月29日 10:28:40 作者：Temptat14x
这篇文章主要介绍了Element ui关闭el-dialog时如何清除数据问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
element ui关闭el-dialog时清除数据
如果是按叉叉关闭或者点表单以外空白处关闭的话
可以给el-dialog添加
:before-close="closeForm"
在methods里添加函数
closeForm(){
this.$refs.form.resetFields();//清除数据
this.dialogFormVisible=false;//关闭对话框
}如果是按取消按钮清除数据，也可以给取消按钮绑定点击事件，点击取消则调用closeForm函数。
注意：
1.要为每个 form-item 加上 prop 属性，要不然无法清空
2.resetFields() 方法是重置表单，重置为初始值，而不是设置为空值
element ui对话框el-dialog关闭事件,清空填写的数据
通常会有需求，在关闭弹框后需要清空填写的数据，这时候就需要关闭事件了
<el-dialog title="标题" :visible.sync="bind" size="small" @close='closeDialog'> </el-dialog>
在标签中加入@close='closeDialog'
mothods中加入
//关闭弹框的事件
closeDialog(){
this.xxx = '';//清空数据
},总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
我们在使用vue项目开发时，v-if是使用的非常多的，在这里我们谈谈如何使用v-i来绑定修改css样式，使用的主要是双向数据绑定，即通过改变他的状态来改变他的样式，这篇文章主要介绍了vue中如何使用v-if,v-else来设置css样式,需要的朋友可以参考下2023-03-03
Vite是一个面向现代浏览器的一个更轻、更快的 Web 应用开发工具,下面这篇文章主要给大家介绍了关于如何使用Vue3+Vite+TS快速搭建一套实用脚手架的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下2022-10-10
在大型Vue项目中,组件通信如同神经网络般贯穿整个应用,这篇文章将为大家详细介绍一下Vue3中的组件通信方式,有需要的小伙伴可以了解下2025-02-02
provide和inject可以实现嵌套组件之间进行传递数据,这两个函数都是在setup函数中使用的,下面这篇文章主要给大家介绍了关于Vue3学习笔记之依赖注入Provide / Inject的相关资料,需要的朋友可以参考下2023-05-05
这篇文章主要介绍了vue spa应用中的路由缓存问题与解决方案，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-05-05
这篇文章主要介绍了vue中pc移动滚动穿透问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-07-07
Vue组件化(ref,props, mixin,.插件)详解
这篇文章主要介绍了Vue组件化(ref, props, mixin, 插件)的相关知识,包括ref属性，props配置项及mixin混入的方式，本文通过示例代码多种方式相结合给大家介绍的非常详细，需要的朋友可以参考下2022-05-05
本文主要介绍了Vue3中watch监听器及源码学习,Watch侦听器在Vue3中特性进行了一些改变和优化,下面来详解的介绍一下基本使用,具有一定的参考价值,感兴趣的可以了解一下2024-01-01
下面小编就为大家分享一篇Vue cli 引入第三方JS和CSS的常用方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-01-01
vue3成功创建项目后 run serve启动项目报错的解决
这篇文章主要介绍了vue3成功创建项目后 run serve启动项目报错的解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
最新评论