好资源导航 » 文章资讯 » vue+ElementUI 关闭对话框清空验证,清除form表单的操作

vue+ElementUI 关闭对话框清空验证,清除form表单的操作

2023-07-19 05:34:04 74

前面跟大家提到过elementUI验证的问题，那么今天就来看看点击对话框和关闭按钮怎么清空验证，清空form表单，避免二次点击还会有验证错误的提示

1、首先在你的对话框取消按钮加一个click事件，例如：（ps:：callOf里面的addGroupData和ref一一对应起来）


取消
确定

2、点击取消按钮，关闭对话框，清除表单验证

callOf(formName){
this.creatGroup=false;
this.$refs[formName].resetFields();
}

3、对话框右上角的close按钮（before-close：关闭前的回调，会暂停Dialog的关闭，function(done)，done用于关闭Dialog。location.reload：刷新整个页面）

closeDialog(done){
this.$confirm('确认关闭？')
.then(_=>{
done();
location.reload();
})
.catch(_=>{});
}

这样就设置好了，不会出现二次点击时，错误提示还遗留在对话框上

补充知识：vue中按钮悬停和选中和更新后自动恢复之前的状态

废话不多说，看代码~




.dict-hold{
margin-left:35px;
width:90px;
height:32px;
background:rgba(57,97,244,1);
&:hover{
background-color:#7295FF;
}
}
.dict_hold_active{
margin-left:35px;
width:90px;
height:32px;
background-color:#7295FF;
}

以上这篇vue+ElementUI关闭对话框清空验证,清除form表单的操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。

返回顶部
514930285
czq8825@qq.com

vue+ElementUI 关闭对话框清空验证,清除form表单的操作

热门推荐

随机推荐