前面跟大家提到過 elementUI驗證的問題，那么今天就來看看 點擊對話框和關閉按鈕 怎么清空驗證，清空form表單，避免二次點擊還會有 驗證錯誤的提示
1、首先在你的對話框 取消按鈕 加一個click事件，例如：（ps:：callOf里面的addGroupData和ref一 一對應起來）
|
1
2
3
4
|
<div slot="footer" class="dialog-footer"> <el-button @click="callOf('addGroupData')">取 消</el-button> <el-button type="primary" @click="addgroupList('addGroupData');">確 定</el-button></div> |
2、點擊取消按鈕，關閉對話框，清除表單驗證
|
1
2
3
4
|
callOf(formName){ this.creatGroup = false; this.$refs[formName].resetFields();} |
3、對話框右上角的close按鈕（before-close：關閉前的回調，會暫停 Dialog 的關閉，function(done)，done 用于關閉 Dialog。 location.reload：刷新整個頁面）
|
1
2
3
4
5
6
7
8
|
closeDialog(done){ this.$confirm('確認關閉？') .then(_ => { done(); location.reload(); }) .catch(_ => { });} |
這樣就設置好了，不會出現 二次點擊時，錯誤提示還遺留在對話框上
補充知識：vue中按鈕懸停和選中和更新后自動恢復之前的狀態
廢話不多說，看代碼~
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
|
<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表單的操作就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持服務器之家。
原文鏈接：https://blog.csdn.net/qq_37104276/article/details/78739832
