vue+ElementUI 关闭对话框清空验证,清除form表单的操作


Posted in Javascript onAugust 06, 2020

前面跟大家提到过 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表单的操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
UserData用法总结 lanyu出品
Jul 01 Javascript
JavaScript1.6数组新特性介绍以及JQuery的几个工具方法
Dec 06 Javascript
使用jQuery.wechat构建微信WEB应用
Oct 09 Javascript
JavaScript中的console.dir()函数介绍
Dec 29 Javascript
JavaScript中Math.SQRT2属性的使用详解
Jun 14 Javascript
整理关于Bootstrap导航的慕课笔记
Mar 29 Javascript
BootStrap的两种模态框方式
May 10 Javascript
vue单页应用加百度统计代码(亲测有效)
Jan 31 Javascript
Angular6封装http请求的步骤详解
Aug 13 Javascript
微信小程序常用简易小函数总结
Feb 01 Javascript
vue解决跨域问题(推荐)
Nov 10 Javascript
jQuery-App输入框实现实时搜索
Nov 19 jQuery
javascript读取本地文件和目录方法详解
Aug 06 #Javascript
antd vue 刷新保留当前页面路由,保留选中菜单,保留menu选中操作
Aug 06 #Javascript
javascript实现页面的实时时钟显示示例
Aug 06 #Javascript
Javascript如何递归遍历本地文件夹
Aug 06 #Javascript
通过vue刷新左侧菜单栏操作
Aug 06 #Javascript
Vue页面手动刷新,实现导航栏激活项还原到初始状态
Aug 06 #Javascript
浅谈JavaScript中等号、双等号、 三等号的区别
Aug 06 #Javascript
You might like
PHP取进制余数函数代码
2012/01/19 PHP
php实现生成code128条形码的方法详解
2017/07/19 PHP
JavaScript常用全局属性与方法记录积累
2013/07/03 Javascript
JS判断、校验MAC地址的2个实例
2014/05/05 Javascript
Javascript中实现String.startsWith和endsWith方法
2015/06/10 Javascript
jQuery实现的鼠标经过时变宽的效果(附demo源码)
2016/04/28 Javascript
基于zepto.js简单实现上传图片
2016/06/21 Javascript
完美解决IE9浏览器出现的对象未定义问题
2016/09/29 Javascript
纯js实现倒计时功能
2017/01/06 Javascript
提高Web性能的前端优化技巧总结
2017/02/27 Javascript
jQuery操作之效果详解
2017/05/19 jQuery
浅谈JS获取元素的N种方法及其动静态讨论
2017/08/25 Javascript
jQuery中extend函数简单用法示例
2017/10/11 jQuery
Vue 监听元素前后变化值实例
2020/07/29 Javascript
JavaScript实现多层颜色选项卡嵌套
2020/09/21 Javascript
8个非常实用的Vue自定义指令
2020/12/15 Vue.js
[02:45]DOTA2英雄基础教程 伐木机
2013/12/23 DOTA
[01:33:59]真人秀《加油 DOTA》 第六期
2014/09/09 DOTA
跟老齐学Python之大话题小函数(2)
2014/10/10 Python
python访问系统环境变量的方法
2015/04/29 Python
Python制作简单的网页爬虫
2015/11/22 Python
Python 数据结构之旋转链表
2017/02/25 Python
解决Linux系统中python matplotlib画图的中文显示问题
2017/06/15 Python
致Python初学者 Anaconda入门使用指南完整版
2018/04/05 Python
python 使用plt画图,去除图片四周的白边方法
2019/07/09 Python
python实现微信自动回复机器人功能
2019/07/11 Python
python Matplotlib底图中鼠标滑过显示隐藏内容的实例代码
2019/07/31 Python
python多进程重复加载的解决方式
2019/12/13 Python
Pycharm 跳转回之前所在页面的操作
2021/02/05 Python
Rag & Bone官网:瑞格布恩高级成衣
2018/04/19 全球购物
法律专业推荐信范文
2013/11/29 职场文书
任命书模板
2014/06/04 职场文书
交通安全横幅标语
2014/10/07 职场文书
结婚典礼致辞
2015/07/28 职场文书
学习新党章心得体会2016
2016/01/15 职场文书
MySQL多表查询机制
2022/03/17 MySQL