elementui 表单清空_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中按钮悬停和选中和更新后自动恢复之前的状态

废话不多说，看代码~

//原本的样式

//点击保存后的样式

保存

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