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模板实现方法
Apr 27 Javascript
一些mootools的学习资源
Feb 07 Javascript
使用js判断TextBox控件值改变然后出发事件
Mar 07 Javascript
JavaScript数组深拷贝和浅拷贝的两种方法
Apr 16 Javascript
jQuery实现鼠标滑过点击事件音效试听
Aug 31 Javascript
第一次记录Bootstrap table学习笔记(1)
May 18 Javascript
vue 计时器组件的实现代码
Sep 14 Javascript
js中时间格式化的几种方法
Jul 22 Javascript
bootstrap table实现合并单元格效果
Dec 24 Javascript
Bootstarp在pycharm中的安装及简单的使用方法
Apr 19 Javascript
原生js实现下拉选项卡
Nov 27 Javascript
JavaScript实现手风琴效果
Feb 18 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
叶罗丽:为什么大家对颜冰这对CP非常关心,却对金茉两人十分冷漠
2020/03/17 国漫
codeigniter中实现一次性加载多个view的方法
2015/03/20 PHP
PHP中的常见魔术方法功能作用及用法实例
2015/07/01 PHP
Laravel 5.3 学习笔记之 安装
2016/08/28 PHP
PHP多进程简单实例小结
2019/11/09 PHP
Moment.js 不容错过的超棒Javascript日期处理类库
2012/04/15 Javascript
javascript自动改变文字大小和颜色的效果的小例子
2013/08/02 Javascript
JavaScript中提前声明变量或函数例子
2014/11/12 Javascript
JS实现仿中关村论坛评分后弹出提示效果的方法
2015/02/23 Javascript
JS中处理时间之setUTCMinutes()方法的使用
2015/06/12 Javascript
ES6新特性之Symbol类型用法分析
2017/03/31 Javascript
Ionic3 UI组件之autocomplete详解
2017/06/08 Javascript
详解浏览器缓存和webpack缓存配置
2018/07/06 Javascript
vue+element-ui动态生成多级表头的方法
2018/08/28 Javascript
Element-ui之ElScrollBar组件滚动条的使用方法
2018/09/14 Javascript
Python运算符重载用法实例分析
2015/06/01 Python
Python-嵌套列表list的全面解析
2016/06/08 Python
浅谈python import引入不同路径下的模块
2017/07/11 Python
django项目搭建与Session使用详解
2018/10/10 Python
python使用原始套接字发送二层包(链路层帧)的方法
2019/07/22 Python
简单了解Pandas缺失值处理方法
2019/11/16 Python
python设置环境变量的作用整理
2020/02/17 Python
keras用auc做metrics以及早停实例
2020/07/02 Python
在django中实现choices字段获取对应字段值
2020/07/12 Python
Appium+Python实现简单的自动化登录测试的实现
2021/01/26 Python
python利用opencv实现颜色检测
2021/02/23 Python
意大利巧克力店:Chocolate Shop
2019/07/24 全球购物
新闻专业推荐信范文
2013/11/20 职场文书
大学校园毕业自我鉴定
2014/01/15 职场文书
数学国培研修感言
2014/02/13 职场文书
五年后的职业生涯规划
2014/03/04 职场文书
给校长的建议书600字
2014/05/15 职场文书
群众路线个人剖析材料及整改措施
2014/11/04 职场文书
安全教育观后感
2015/06/17 职场文书
2015年小学重阳节活动总结
2015/07/29 职场文书
python调用ffmpeg命令行工具便捷操作视频示例实现过程
2021/11/01 Python