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 相关文章推荐
Firebug 字幕文件JSON地址获取代码
Oct 28 Javascript
jquery实现每个数字上都带进度条的幻灯片
Feb 20 Javascript
js 获取、清空input type=&quot;file&quot;的值(示例代码)
Dec 24 Javascript
jQuery实现响应浏览器缩放大小并改变背景颜色
Oct 31 Javascript
javascript实现表单验证
Jan 29 Javascript
在vue-cli项目中使用bootstrap的方法示例
Apr 21 Javascript
小程序图片剪裁加旋转的示例代码
Jul 10 Javascript
vue.js实现的全选与全不选功能示例【基于elementui】
Dec 03 Javascript
vue-cli2.0转3.0之项目搭建的详细步骤
Dec 11 Javascript
浅谈webpack和webpack-cli模块源码分析
Jan 19 Javascript
在vue项目中封装echarts的步骤
Dec 25 Vue.js
JavaScript使用setTimeout实现倒计时效果
Feb 19 Javascript
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
40年前的这部特摄片恐龙特级克塞号80后的共同回忆
2020/03/08 日漫
php Smarty模板生成html文档的方法
2010/04/12 PHP
PHP调用Webservice实例代码
2011/07/29 PHP
Yii2实现ajax上传图片插件用法
2016/04/28 PHP
PHP大文件分割上传 PHP分片上传
2017/08/28 PHP
PHP基于cookie实现统计在线人数功能示例
2019/01/16 PHP
PHP读取Excel内的图片(phpspreadsheet和PHPExcel扩展库)
2019/11/19 PHP
jquery 学习笔记 传智博客佟老师附详细注释
2020/09/12 Javascript
关于onScroll事件在IE6下每次滚动触发三次bug说明
2011/09/21 Javascript
javascript中取前n天日期的两种方法分享
2014/01/26 Javascript
JavaScript通过字符串调用函数的实现方法
2015/03/18 Javascript
详解JavaScript逻辑And运算符
2015/12/04 Javascript
JS仿hao123导航页面图片轮播效果
2016/09/01 Javascript
vue实现登陆登出的实现示例
2017/09/15 Javascript
Bootstrap实现下拉菜单多级联动
2017/11/23 Javascript
分享vue里swiper的一些坑
2018/08/30 Javascript
利用Angular7开发一个Radio组件的全过程
2019/07/11 Javascript
TypeScript之调用栈的实现
2019/12/31 Javascript
JS document form表单元素操作完整示例
2020/01/13 Javascript
基于aotu.js实现微信自动添加通讯录中的联系人功能
2020/05/28 Javascript
Python函数中*args和**kwargs来传递变长参数的用法
2016/01/26 Python
tensorflow获取变量维度信息
2018/03/10 Python
利用Django-environ如何区分不同环境
2018/08/26 Python
python字典setdefault方法和get方法使用实例
2019/12/25 Python
Original Penguin英国官方网站:美国著名休闲时装品牌
2016/10/30 全球购物
Michael Kors美国官网:美式奢侈生活风格的代表
2016/11/25 全球购物
超市实习总结自我鉴定
2013/09/19 职场文书
技术副厂长岗位职责
2013/12/26 职场文书
运动会解说词50字
2014/01/18 职场文书
乡镇干部十八大感言
2014/02/17 职场文书
艾滋病宣传活动总结
2014/05/08 职场文书
HR求职自荐信范文
2014/06/21 职场文书
单位委托书范本(3篇)
2014/09/18 职场文书
遗嘱继承权公证书
2015/01/26 职场文书
2015年个人招商工作总结
2015/04/25 职场文书
公证书
2019/04/17 职场文书