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实现兄弟组件之间跳转指定tab标签页，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-05-05
这篇文章主要为大家详细介绍了vue中非父子组件通信，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2022-02-02
本文主要介绍了vue实现虚拟滚动渲染成千上万条数据，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-02-02
vue项目中使用rimraf dev启动时删除dist目录方式
这篇文章主要介绍了vue项目中使用rimraf dev启动时删除dist目录方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这篇文章主要介绍了解决vue一个页面中复用同一个echarts组件的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
vue3应用elementPlus table并滚动显示问题
这篇文章主要介绍了vue3应用elementPlus table并滚动显示问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-12-12
这篇文章主要给大家介绍了关于Vue3中ref的用法举例总结的相关资料,ref()接受一个内部值,返回一个响应式的可更改的ref对象,此对象只有一个指向其内部值的属性.value,需要的朋友可以参考下2023-10-10
vue3的页面跳转有两种方式，第一种是标签内跳转，第二种是编程式路由导航，本文通过实例代码给大家介绍的非常详细，需要的朋友参考下吧2023-05-05
这篇文章主要介绍了vue源码中的检测方法的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-09-09
之前使用 ElementPlus 做项目的时候,由于不会使用按需引入耽误了不少时间,这篇文章主要给大家介绍了关于element-plus自动导入和按需导入的相关资料,需要的朋友可以参考下2022-08-08
最新评论