vue+elementui 对话框取消 表单验证重置示例


Posted in Javascript onOctober 29, 2019

最近在写增删改查,在新增的时候要弹出对话框填写form表单信息,发现对话框右上角的小X和右下角的取消不是一个事件,我想在点击它们两个的时候都可以重置表单,最终解决,如下。

vue:

<el-dialog 
:title="titleName[dialogStatus]" 
:visible.sync="dialogFormVisible" 
@close="closeDialog" 
:close-on-click-modal="false">
 <el-form :model="form" :rules="rules" ref="form">
  ...
 </el-form>
 <div slot="footer" class="dialog-footer">
  <el-button @click="closeForm('formb')">取消</el-button>
  <el-button type="primary" @click="submitForm('formb')" v-show="save">保存</el-button>
 </div>
</el-dialog>

js:

export default{
 data() {
  form: {
  }
 },
 methods:{
  // 对话框取消事件
  closeFrom(formName){
   this.dialogFormVisible = false;
   // 点击取消 数据重置
   this.$refs[formName].resetFields();
  },
  // 对话框关闭事件
  closeDialog(){
   // 点击关闭 数据重置
   this.$refs['form'].resetFields();
  }
 }
}

总结:

this.$refs[formName].resetFields();在数据重置时,因为取消按钮绑定了formName,所以可以不填写而直接写formName,但关闭没有绑定,所以[‘form']里面写formName就可以了。

以上这篇vue+elementui 对话框取消 表单验证重置示例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
DHTML Slide Show script图片轮换
Mar 03 Javascript
Jquery 1.42 checkbox 全选和反选代码
Mar 27 Javascript
基于Jquery的将DropDownlist的选中值赋给label的实现代码
May 06 Javascript
js实现iframe跨页面调用函数的方法
Dec 13 Javascript
jQuery回调函数的定义及用法实例
Dec 23 Javascript
JS实现的论坛Ajax打分效果完整实例
Oct 31 Javascript
jquery实现全选和全不选功能效果的实现代码【推荐】
May 05 Javascript
jQuery四种选择器使用及示例
Jun 05 Javascript
JavaScript作用域示例详解
Jul 07 Javascript
JavaScript实现翻页功能(附效果图)
Feb 16 Javascript
浅谈angular表单提交中ng-submit的默认使用方法
Sep 30 Javascript
微信 jssdk 签名错误invalid signature的解决方法
Jan 14 Javascript
vue实现路由监听和参数监听
Oct 29 #Javascript
基于axios 的responseType类型的设置方法
Oct 29 #Javascript
关于vue2强制刷新,解决页面不会重新渲染的问题
Oct 29 #Javascript
vue + elementUI实现省市县三级联动的方法示例
Oct 29 #Javascript
vue 强制组件重新渲染(重置)的两种方案
Oct 29 #Javascript
javascript实现简单打字游戏
Oct 29 #Javascript
简单使用webpack打包文件的实现
Oct 29 #Javascript
You might like
PHP中for循环语句的几种变型
2007/03/16 PHP
php 友好URL的实现(吐血推荐)
2008/10/04 PHP
php中通过数组进行高效随机抽取指定条记录的算法
2013/09/09 PHP
又拍云异步上传实例教程详解
2016/04/19 PHP
php使用number_format函数截取小数的方法分析
2016/05/27 PHP
PHP生成静态HTML文档实现代码
2016/06/23 PHP
PHP去除字符串最后一个字符的三种方法实例
2017/03/01 PHP
学习thinkphp5.0验证类使用方法
2017/11/16 PHP
tp5框架前台无限极导航菜单类实现方法分析
2020/03/29 PHP
nodejs 后缀名判断限制代码
2011/03/31 NodeJs
jQuery 瀑布流 浮动布局(一)(延迟AJAX加载图片)
2012/05/23 Javascript
禁止空格提交表单的js代码
2013/11/17 Javascript
JS可以控制样式的名称写法一览
2014/01/16 Javascript
Javascript 拖拽的一些高级的应用(逐行分析代码,让你轻松了拖拽的原理)
2015/01/23 Javascript
详解AngularJS中自定义指令的使用
2015/06/17 Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记6)
2015/12/20 Javascript
JS阻止事件冒泡行为和闭包的方法
2016/06/16 Javascript
vue动态生成dom并且自动绑定事件
2017/04/19 Javascript
Vue cli+mui 区域滚动的实例代码
2018/01/25 Javascript
Vue向后台传数组数据,springboot接收vue传的数组数据实例
2020/11/12 Javascript
Python itertools模块详解
2015/05/09 Python
Python实现Smtplib发送带有各种附件的邮件实例
2017/06/05 Python
获取python的list中含有重复值的index方法
2018/06/27 Python
学习python可以干什么
2019/02/26 Python
Python爬虫使用浏览器cookies:browsercookie过程解析
2019/10/22 Python
Python调用.NET库的方法步骤
2019/12/27 Python
CentOS7下安装python3.6.8的教程详解
2020/01/03 Python
python selenium自动化测试框架搭建的方法步骤
2020/06/14 Python
使用python实现微信小程序自动签到功能
2020/04/27 Python
英国男士时尚网站:Dandy Fellow
2018/02/09 全球购物
美国滑雪板和装备购物网站:Skis.com
2018/12/20 全球购物
药剂学专业应届生自荐信
2013/09/29 职场文书
互联网创业计划书的书写步骤
2014/01/28 职场文书
《老人与海鸥》教学反思
2016/02/16 职场文书
python获取对象信息的实例详解
2021/07/07 Python
关于python3 opencv 图像二值化的问题(cv2.adaptiveThreshold函数)
2022/04/04 Python