vue+ElementUI 关闭对话框清空验证,清除form表单的操作
前面跟大家提到过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表单的操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持毛票票。