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 相关文章推荐
JavaScript TO HTML 转换
Jun 26 Javascript
Json字符串转换为JS对象的高效方法实例
May 01 Javascript
JS中判断null、undefined与NaN的方法
Mar 26 Javascript
js简单的表格添加行和删除行操作示例
Mar 31 Javascript
浅谈JavaScript中的String对象常用方法
Feb 25 Javascript
JavaScript知识点总结(六)之JavaScript判断变量数据类型
May 31 Javascript
jQuery原理系列-css选择器的简单实现
Jun 07 Javascript
分析JavaScript数组操作难点
Dec 18 Javascript
AngularJS日期格式化常见操作实例分析
May 17 Javascript
JS使用数组实现的队列功能示例
Mar 04 Javascript
JS隐藏号码中间4位代码实例
Apr 09 Javascript
微信小程序学习总结(三)条件、模板、文件引用实例分析
Jun 04 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
4月1日重磅发布!《星际争霸II》6.0.0版本更新
2020/04/09 星际争霸
Laravel框架Request、Response及Session操作示例
2019/05/06 PHP
php让json_encode不自动转义斜杠“/”的方法
2020/04/27 PHP
javascript代码加载优化方法
2011/01/30 Javascript
你需要知道的10个最佳javascript开发实践小结
2012/04/15 Javascript
javascript数组的使用
2013/03/28 Javascript
JavaScript实现复制功能各浏览器支持情况实测
2013/07/18 Javascript
自定义的一个简单时尚js下拉选择框
2013/11/20 Javascript
jquery 提示信息显示后自动消失的具体实现
2013/12/18 Javascript
Javascript 拖拽的一些简单的应用(逐行分析代码,让你轻松了拖拽的原理)
2015/01/23 Javascript
JavaScript实现彩虹文字效果的方法
2015/04/16 Javascript
JavaScript实现点击按钮字体放大、缩小
2016/02/29 Javascript
jquery判断类型是不是number类型的实例代码
2016/10/07 Javascript
Mongoose学习全面理解(推荐)
2017/01/21 Javascript
js实现登录框鼠标拖拽效果
2017/03/09 Javascript
理解 Node.js 事件驱动机制的原理
2017/08/16 Javascript
vue params、query传参使用详解
2017/09/12 Javascript
基于JavaScript实现报警器提示音效果
2017/10/27 Javascript
React组件中的this的具体使用
2018/02/28 Javascript
JS函数节流和防抖之间的区分和实现详解
2019/01/11 Javascript
JavaScript实现移动端弹窗后禁止滚动
2020/05/25 Javascript
python3.0 模拟用户登录,三次错误锁定的实例
2017/11/02 Python
使用Python通过win32 COM打开Excel并添加Sheet的方法
2018/05/02 Python
Django框架创建项目的方法入门教程
2019/11/04 Python
利用python实现.dcm格式图像转为.jpg格式
2020/01/13 Python
Python 实现网课实时监控自动签到、打卡功能
2020/03/12 Python
Python ckeditor富文本编辑器代码实例解析
2020/06/22 Python
Ibatis中如何提高SQL Map的性能
2013/05/11 面试题
Prototype如何更新局部页面
2013/03/03 面试题
学校岗位设置方案
2014/01/16 职场文书
公务员平时考核实施方案
2014/03/11 职场文书
2014年三万活动总结
2014/04/26 职场文书
电台广播稿范文
2015/08/19 职场文书
2019年行政人事个人工作总结范本!
2019/07/19 职场文书
微信小程序实现拍照和相册选取图片
2021/05/09 Javascript
Redis数据同步之redis shake的实现方法
2022/04/21 Redis