微客导航 » 文章资讯 » vue+elementui 对话框取消表单验证重置示例

vue+elementui 对话框取消表单验证重置示例

2023-08-10 05:31:06 224

最近在写增删改查，在新增的时候要弹出对话框填写form表单信息，发现对话框右上角的小X和右下角的取消不是一个事件，我想在点击它们两个的时候都可以重置表单，最终解决，如下。

vue：



...


取消
保存

js：

exportdefault{
data(){
form:{
}
},
methods:{
//对话框取消事件
closeFrom(formName){
this.dialogFormVisible=false;
//点击取消数据重置
this.$refs[formName].resetFields();
},
//对话框关闭事件
closeDialog(){
//点击关闭数据重置
this.$refs['form'].resetFields();
}
}
}

总结：

this.$refs[formName].resetFields();在数据重置时，因为取消按钮绑定了formName，所以可以不填写而直接写formName，但关闭没有绑定，所以[‘form']里面写formName就可以了。

以上这篇vue+elementui对话框取消表单验证重置示例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
3162201930
czq8825@qq.com

vue+elementui 对话框取消 表单验证重置示例

热门推荐

随机推荐

vue+elementui 对话框取消表单验证重置示例