前面跟大家提到過 elementUI驗(yàn)證的問題，那么今天就來看看 點(diǎn)擊對(duì)話框和關(guān)閉按鈕 怎么清空驗(yàn)證，清空form表單，避免二次點(diǎn)擊還會(huì)有 驗(yàn)證錯(cuò)誤的提示

1、首先在你的對(duì)話框 取消按鈕 加一個(gè)click事件，例如：（ps:：callOf里面的addGroupData和ref一 一對(duì)應(yīng)起來）

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

2、點(diǎn)擊取消按鈕，關(guān)閉對(duì)話框，清除表單驗(yàn)證

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

3、對(duì)話框右上角的close按鈕（before-close：關(guān)閉前的回調(diào)，會(huì)暫停 Dialog 的關(guān)閉，function(done)，done 用于關(guān)閉 Dialog。 location.reload：刷新整個(gè)頁面）

closeDialog(done){this.$confirm(’確認(rèn)關(guān)閉？’).then(_ => { done(); location.reload(); }) .catch(_ => { });}

這樣就設(shè)置好了，不會(huì)出現(xiàn) 二次點(diǎn)擊時(shí)，錯(cuò)誤提示還遺留在對(duì)話框上

補(bǔ)充知識(shí)：vue中按鈕懸停和選中和更新后自動(dòng)恢復(fù)之前的狀態(tài)

廢話不多說，看代碼~

<template>//原本的樣式//點(diǎn)擊保存后的樣式<Button : @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(’更新失敗，請(qǐng)重試’); return false;}if (!this.selectDict.dictName) { thiz.$Message.error(’請(qǐng)輸入字典名稱’); return false;}if (this.selectDict.dictSortid == null) { thiz.$Message.error(’請(qǐng)輸入排序號(hào)’); return false;}if (!this.currIsType && !this.selectDict.dictValue) { thiz.$Message.error(’請(qǐng)輸入字典值’); 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 關(guān)閉對(duì)話框清空驗(yàn)證,清除form表單的操作就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持好吧啦網(wǎng)。