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 相关文章推荐
jquery.AutoComplete.js中文修正版(支持firefox)
Apr 09 Javascript
理解Javascript闭包
Nov 01 Javascript
jquery实现动态菜单的实例代码
Nov 28 Javascript
用C/C++来实现 Node.js 的模块(一)
Sep 24 Javascript
javascript生成随机数方法汇总
Nov 12 Javascript
全面解析DOM操作和jQuery实现选项移动操作代码分享
Jun 07 Javascript
Bootstrap基本样式学习笔记之图片(6)
Dec 07 Javascript
AngularJS实践之使用ng-repeat中$index的注意点
Dec 22 Javascript
详解支持Angular 2的表格控件
Jan 19 Javascript
如何在JavaScript中谨慎使用代码注释
Jun 21 Javascript
javascript json对象小技巧之键名作为变量用法分析
Nov 11 Javascript
深入浅析vue全局环境变量和模式
Apr 28 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
PHP多线程抓取网页实现代码
2010/07/22 PHP
基于PHP开发中的安全防范知识详解
2013/06/06 PHP
php开启与关闭错误提示适用于没有修改php.ini的权限
2014/10/16 PHP
PHP中的类型提示(type hinting)功能介绍
2015/07/01 PHP
利用PHP抓取百度阅读的方法示例
2016/12/18 PHP
PHP迭代与递归实现无限级分类
2017/08/28 PHP
js弹窗代码 可以指定弹出间隔
2010/07/03 Javascript
在多个页面使用同一个HTML片段的代码
2011/03/04 Javascript
js实现的仿新浪微博完美的时间组件升级版
2011/12/20 Javascript
JavaScript使用setTimeout实现延迟弹出警告框的方法
2015/04/07 Javascript
JS实现窗口加载时模拟鼠标移动的方法
2015/06/03 Javascript
jquery实现带缩略图的全屏图片画廊效果实例
2015/06/25 Javascript
AngularJS入门教程之与服务器(Ajax)交互操作示例【附完整demo源码下载】
2016/11/02 Javascript
纯JS代码实现隔行变色鼠标移入高亮
2016/11/23 Javascript
使用node.js搭建服务器
2017/05/20 Javascript
老生常谈Bootstrap媒体对象
2017/07/06 Javascript
详解React 16 中的异常处理
2017/07/28 Javascript
解决nodejs的npm命令无反应的问题
2018/05/17 NodeJs
详解vue-cli3多页应用改造
2019/06/04 Javascript
python返回昨天日期的方法
2015/05/13 Python
PYTHON 中使用 GLOBAL引发的一系列问题
2016/10/12 Python
Python信息抽取之乱码解决办法
2017/06/29 Python
基于python中staticmethod和classmethod的区别(详解)
2017/10/24 Python
python3安装speech语音模块的方法
2018/12/24 Python
python爬虫之自制英汉字典
2019/06/24 Python
如何通过python实现全排列
2020/02/11 Python
pandas中ix的使用详细讲解
2020/03/09 Python
Python爬虫headers处理及网络超时问题解决方案
2020/06/19 Python
Python读取二进制文件代码方法解析
2020/06/22 Python
Python如何实现线程间通信
2020/07/30 Python
Python读取图像并显示灰度图的实现
2020/12/01 Python
Python实现Kerberos用户的增删改查操作
2020/12/14 Python
公务员爱岗敬业演讲稿
2014/08/26 职场文书
大二学生自我检讨书
2014/10/23 职场文书
导游词之峨眉乐山/兵马俑/北京故宫御花园
2019/09/03 职场文书
jdbc使用PreparedStatement批量插入数据的方法
2021/04/27 MySQL