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

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

<div slot="footer" class="dialog-footer">　　<el-button @click="callOf('addGroupData')">取 消</el-button> <el-button type="primary" @click="addgroupList('addGroupData');">确 定</el-button></div>

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

废话不多说，看代码~

<template>//原本的样式//点击保存后的样式<Button class="dict-hold" :class="{dict_hold_active:isActive}" @click="saveDict">保存</Button></template><script> export default { data() { return{ isActive:false } }, methods: { saveDict() { var thiz = this; thiz.isActive=true; console.log('保存', this.selectDict); if (!this.selectDict || this.selectDict.unid === '0') { thiz.$Message.error('更新失败，请重试'); return false; } if (!this.selectDict.dictName) { thiz.$Message.error('请输入字典名称'); return false; } if (this.selectDict.dictSortid == null) { thiz.$Message.error('请输入排序号'); return false; } if (!this.currIsType && !this.selectDict.dictValue) { thiz.$Message.error('请输入字典值'); return false; } this.$store.dispatch('axios_re', { type: 'post', url: '/address/updateDict', data: { unid: this.selectDict.unid, dictName: this.selectDict.dictName, }, success: function (res) { thiz.$Message.success('更新成功'); thiz.selectDict.title = thiz.selectDict.dictName; thiz.isActive=false; }, fail: function (err) { thiz.$Message.error('更新失败'); thiz.isActive=false; } }); } } }</script><style lang="scss" scoped> .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; }</style>

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