vue+ElementUI 关闭对话框清空验证,清除form表单的操作

 更新时间:2020年08月06日 09:53:17   作者:qq_37104276  
这篇文章主要介绍了vue+ElementUI 关闭对话框清空验证,清除form表单的操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

前面跟大家提到过 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表单的操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • 详解VUE中的Proxy代理

    详解VUE中的Proxy代理

    这篇文章主要介绍了Proxy代理对象详解,Proxy 是ES6中提供的一个非常强大的功能,可以用来代理另一个对象,从而拦截、监视并修改这个对象的各种操作,需要的朋友可以参考下
    2023-04-04
  •  用Vue Demi 构建同时兼容Vue2与Vue3组件库

     用Vue Demi 构建同时兼容Vue2与Vue3组件库

    这篇文章主要介绍了 用Vue Demi 构建同时兼容Vue2与Vue3组件库,我们通过考虑其功能、工作原理以及如何开始使用它来了解 Vue Demi,下面我们一起进入文章学起来吧
    2022-02-02
  • ElementUI Tree 树形控件的使用并给节点添加图标

    ElementUI Tree 树形控件的使用并给节点添加图标

    这篇文章主要介绍了ElementUI Tree 树形控件的使用并给节点添加图标,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-02-02
  • Vue3 构建 Web Components使用详解

    Vue3 构建 Web Components使用详解

    这篇文章主要为大家介绍了Vue3 构建 Web Components使用详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-09-09
  • 路由vue-route的使用示例教程

    路由vue-route的使用示例教程

    这篇文章主要介绍了路由vue-route的使用,本文结合示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-12-12
  • Vue+Element自定义纵向表格表头教程

    Vue+Element自定义纵向表格表头教程

    这篇文章主要介绍了Vue+Element自定义纵向表格表头教程,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-10-10
  • vue实现横屏滚动公告效果

    vue实现横屏滚动公告效果

    这篇文章主要为大家详细介绍了vue实现横屏滚动公告效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-04-04
  • Vue3中使用监听器的具体实践

    Vue3中使用监听器的具体实践

    监听器是Vue3中非常好用的一个特性,用于监听某个响应式变量的变化,本文就来介绍一下Vue3中使用监听器的具体实践,具有一定的参考价值,感兴趣的可以了解一下
    2023-12-12
  • Vue子组件与父组件详细解析

    Vue子组件与父组件详细解析

    这篇文章主要介绍的是Vue子组件与父组件,什么是父组件,什么是子组件很多时候面对这个问题我们都会有所混淆,下面文章我们就来详细介绍,需要的朋友可以参考一下
    2021-10-10
  • 快速理解Vue路由导航守卫

    快速理解Vue路由导航守卫

    这篇文章主要介绍了快速理解Vue路由导航守卫,“导航”表示路由正在发生变化,vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程 中:全局的, 单个路由独享的, 或者组件级的,下面来快速来接具体内容吧
    2021-12-12

最新评论