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 相关文章推荐
js的with语句使用方法
Sep 21 Javascript
jQuery.prototype.init选择器构造函数源码思路分析
Feb 05 Javascript
jQuery选择器源码解读(六):Sizzle选择器匹配逻辑分析
Mar 31 Javascript
Node.js的项目构建工具Grunt的安装与配置教程
May 12 Javascript
vue项目常用组件和框架结构介绍
Dec 24 Javascript
用vue写一个仿简书的轮播图的示例代码
Mar 13 Javascript
解决vue router组件状态刷新消失的问题
Aug 01 Javascript
探秘vue-rx 2.0(推荐)
Sep 21 Javascript
vue.js 打包时出现空白页和路径错误问题及解决方法
Jun 26 Javascript
js仿360开机效果
Dec 26 Javascript
VUE中setTimeout和setInterval自动销毁案例
Sep 07 Javascript
JavaScript async/await原理及实例解析
Dec 02 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解答方法
2012/02/04 PHP
如何使用“PHP” 彩蛋进行敏感信息获取
2013/08/07 PHP
php获取301跳转URL简单实例
2013/12/16 PHP
PHP中Header使用的HTTP协议及常用方法小结
2014/11/04 PHP
PHP的邮件群发系统phplist配置方法详细总结
2016/03/30 PHP
PHP二维数组分页2种实现方法解析
2020/07/09 PHP
JS实多级联动下拉菜单类,简单实现省市区联动菜单!
2007/05/03 Javascript
ext checkboxgroup 回填数据解决
2009/08/21 Javascript
select 控制网页内容隐藏于显示的实现代码
2010/05/25 Javascript
js 创建书签小工具之理论
2011/02/25 Javascript
jQuery使用height()获取高度需要注意的地方
2014/12/13 Javascript
JavaScript实现页面5秒后自动跳转的方法
2015/04/16 Javascript
D3.js中data(), enter() 和 exit()的问题详解
2015/08/17 Javascript
java中String类型变量的赋值问题介绍
2016/03/23 Javascript
浅谈window.onbeforeunload() 事件调用ajax
2016/06/29 Javascript
AngularJS中update两次出现$promise属性无法识别的解决方法
2017/01/05 Javascript
Angularjs2不同组件间的通信实例代码
2017/05/06 Javascript
Angular2使用Augury来调试Angular2程序
2017/05/21 Javascript
使用layui 渲染table数据表格的实例代码
2018/08/19 Javascript
H5+C3+JS实现五子棋游戏(AI篇)
2020/05/28 Javascript
javascript实现的图片预览和上传功能示例【兼容IE 9】
2020/05/01 Javascript
[01:19:46]DOTA2-DPC中国联赛 正赛 SAG vs DLG BO3 第一场 2月28日
2021/03/11 DOTA
python快速查找算法应用实例
2014/09/26 Python
解决pycharm中导入自己写的.py函数出错问题
2020/02/12 Python
Python图像处理库PIL的ImageFont模块使用介绍
2020/02/26 Python
html5如何在Canvas中实现自定义路径动画示例
2017/09/18 HTML / CSS
美国杰西潘尼官网:JCPenney
2019/06/12 全球购物
期末总结的个人自我评价
2013/11/02 职场文书
生产车间班组长岗位职责
2014/01/06 职场文书
医疗纠纷协议书
2014/04/16 职场文书
金融事务专业求职信
2014/04/25 职场文书
初中生旷课检讨书范文
2014/10/06 职场文书
刑事辩护授权委托书范本
2014/10/17 职场文书
西部计划志愿者工作总结
2015/08/11 职场文书
Go语言特点及基本数据类型使用详解
2022/03/21 Golang
python如何查找列表中元素的位置
2022/05/30 Python