element-ui中关闭对话框清空验证,清除form表单数据
对于elementUI中对话框,点击对话框和关闭按钮 怎么清空验证,清空form表单,避免二次点击还会有 验证错误的提示。今天终于自己查资料解决了,分享给大家
1、首先在你的对话框 取消按钮 加一个click事件,例如:(callOf里面的ruleForm和ref一 一对应起来)
<div slot="footer" class="dialog-footer">
<el-button @click="callOf('ruleForm')">取 消</el-button>
<el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button> </div>
2、点击取消按钮,关闭对话框,清除表单验证
callOf(formName){
this.dialogFormVisible = 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(_ => { });
}

这样就设置好了,不会出现 二次点击时,错误提示还遗留在对话框上。
参考网站:https://www.cnblogs.com/hezihao/p/7416820.html
element-ui中关闭对话框清空验证,清除form表单数据的更多相关文章
- springboot框架中集成thymeleaf引擎,使用form表单提交数据,debug结果后台获取不到数据
springboot框架中集成thymeleaf引擎,使用form表单提交数据,debug结果后台获取不到数据 表单html: <form class="form-horizontal ...
- vue + ElementUI 关闭对话框清空验证,清除form表单
前面跟大家提到过 elementUI验证的问题,那么今天就来看看 点击对话框和关闭按钮 怎么清空验证,清空form表单,避免二次点击还会有 验证错误的提示 1.首先在你的对话框 取消按钮 加一个cli ...
- input file 在开发中遇到的问题 类似ajax form表单提交 input file中的文件
最近在做项目的过程中遇到个问题,在这里做个记录防止日后忘记 现今的主流浏览器由于ajax提交form表单无法把文件类型数据提交到后台,供后台处理,可是开发中由于某些原因又不得不用ajax提交文件, 为 ...
- JS的文本框验证以及form表单的提交阻止
js: 1.只能输入数字 只能输入数字:<input type="text" onkeyup="javascript:ReNumber(this)" /& ...
- Jquery如何序列化form表单数据为JSON对象 C# ADO.NET中设置Like模糊查询的参数 从客户端出现小于等于公式符号引发检测到有潜在危险的Request.Form 值 jquery调用iframe里面的方法 Js根据Ip地址自动判断是哪个城市 【我们一起写框架】MVVM的WPF框架(三)—数据控件 设计模式之简单工厂模式(C#语言描述)
jquery提供的serialize方法能够实现. $("#searchForm").serialize();但是,观察输出的信息,发现serialize()方法做的是将表单中的数 ...
- 一键清空Form表单数据
今天在工作项目调试bug当中,遇到这样的需求:页面上的数据太多,一个一个清空太繁琐,所以就采用全部清空的写法: $(':input','#myform').not(':button, :submit, ...
- vue中axios的post请求使用form表单格式发送数据
vue使用插件qs实现 (qs 是一个增加了一些安全性的查询字符串解析和序列化字符串的库.) 在jquery中的ajax的方法已将此封装,所以不需要再次序列化 1. 安装 在项目中使用命令行工具输 ...
- easyui不提交window中的form表单数据
<form id="ff" method="post">, <div id="win" class="easyu ...
- [php基础]PHP Form表单验证:PHP form validator使用说明
在PHP网站开发建设中,用户注册.留言是必不可少的功能,用户提交的信息数据都是通过Form表单提交,为了保证数据的完整性.安全性,PHP Form表单验证是过滤数据的首要环节,PHP对表单提交数据的验 ...
随机推荐
- 【Java】给整数加上千分位分隔符
package com.testEmp; import java.text.DecimalFormat; public class NumberFormat { public static void ...
- [转]Nginx实现高并发的原理
Nginx 首先要明白,Nginx 采用的是多进程(单线程) & 多路IO复用模型.使用了 I/O 多路复用技术的 Nginx,就成了”并发事件驱动“的服务器. 异步非阻塞(AIO)的详解ht ...
- 软件-绘图-AutoCAD:百科
ylbtech-软件-绘图-AutoCAD:百科 AutoCAD(Autodesk Computer Aided Design)是Autodesk(欧特克)公司首次于1982年开发的自动计算机辅助设计 ...
- 更改mysql 数据库 utf8
mysql> alter database 数据库名 character set utf8;
- ceph报错
[ceph_deploy.mon][ERROR ] RuntimeError: config file /etc/ceph/ceph.conf exists with different conten ...
- Centos 7.2 安装与配置JDK8
系统环境:centos7安装方式:rpm安装软件:jdk-8u25-linux-x64.rpm下载地址:http://www.oracle.com/technetwork/java/javase/do ...
- 【HTML】常用的标签学习
HTML(HyperText Markup Language )又称超文本标记语言,与一般文本文件不同的是它是由各种标签或标记组成 <标签名></标签名> .所以html的学习 ...
- cnpm 安装vue与vue/cli
cnpm 安装 npm install -g cnpm --registry=https://registry.npm.taobao.org 安装 vue npm install -g npm 安装 ...
- 一、linux基础命令
一. 常用系统工作命令 1.echo 命令 echo命令用于在终端输出字符串或者变量提取后的值 echo $SHELL 2.date命令 date命令用于显示及设置系统的时间或者日期 参数 ...
- C#枚举扩展方法,获取枚举值的描述值以及获取一个枚举类下面所有的元素
/// <summary> /// 枚举扩展方法 /// </summary> public static class EnumExtension { private stat ...