前面跟大家提到过 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表单的操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com
暂无评论...
更新日志
2024年09月23日
2024年09月23日
- 国风大师纯音系列《古筝仙子 常静演奏 十指弹一》1CD[FLAC][919MB]
- DasKapital-OneMustHaveChaosInsidetoGiveBirthtoaDancingStar(2024)[24-44.1]WAV
- 王菲.1999-《只爱陌生人》日本东芝版[低速原抓WAV+CUE]
- 张小英1987-金奖金曲第一集[新加坡版][WAV+CUE]
- 鹿晗.2015-重启【海蝶】【FLAC分轨】
- 张芸京.2012-小女孩【金牌大风】【WAV+CUE】
- 余天.2002-雄狮魅力金曲2CD(南方金点系列)【南方】【WAV+CUE】
- 银霞.1982-《结·SAYYESMYBOY》台湾复刻版[WAV+CUE]
- 梁汉文1993-火热动感[引进版][WAV+CUE]
- 梁汉文2008-EDMONDHITS48[香港]3CD[WAV+CUE]
- 国风大师纯音系列《童丽-[渭城曲]》1CD[WAV分轨][593.5MB]
- 国风大师纯音系列《许菱子《烧筝2》古筝曲集》1CD[WAV分轨][1.3GB]
- 王子异《1996 Part.2》[320K/MP3][18.29MB]
- 群星.1994-宝丽金最倾情3CD【宝丽金】【WAV+CUE】
- 乐俊亨.2024-同泪【CharioticMusic】【FLAC分轨】