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 相关文章推荐
javascript小数计算出现近似值的解决办法
Feb 06 Javascript
jquery拖动插件(jquery.drag)使用介绍
Jun 18 Javascript
运用jQuery定时器的原理实现banner图片切换
Oct 22 Javascript
jQuery实现ichat在线客服插件
Dec 29 Javascript
Node.js中的process.nextTick使用实例
Jun 25 Javascript
Express的路由详解
Dec 10 Javascript
angularjs封装bootstrap时间插件datetimepicker
Jun 20 Javascript
JS仿京东移动端手指拨动切换轮播图效果
Apr 10 Javascript
JS基于递归算法实现1,2,3,4,5,6,7,8,9倒序放入数组中的方法
Jan 03 Javascript
Bootstrap笔记—折叠实例代码
Mar 13 Javascript
Node.js之删除文件夹(含递归删除)代码实例
Sep 09 Javascript
vue 封装面包屑组件教程
Nov 16 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的substr_replace将指定两位置之间的字符替换为*号
2011/05/04 PHP
php实现网站顶踩功能的完整前端代码
2015/07/19 PHP
PHP 芝麻信用接入的注意事项
2016/12/01 PHP
PHP中16个高危函数整理
2019/09/19 PHP
编写Js代码要注意的几条规则
2010/09/10 Javascript
ExtJS 入门
2010/10/29 Javascript
javascript中比较字符串是否相等的方法
2013/07/23 Javascript
JQuery中使用Ajax赋值给全局变量失败异常的解决方法
2014/08/18 Javascript
JavaScript获得url所有参数键值表的方法
2015/03/21 Javascript
JS中Location使用详解
2015/05/12 Javascript
JS实现仿雅虎首页快捷登录入口及导航模块效果
2015/09/19 Javascript
jQuery中inArray方法注意事项分析
2016/01/25 Javascript
JS与jQuery实现隔行变色的方法
2016/09/09 Javascript
Node.js的文件权限及读写flag详解
2016/10/11 Javascript
bootstrapfileinput实现文件自动上传
2016/11/08 Javascript
JavaScript 中对象的深拷贝
2016/12/04 Javascript
javascript按钮禁用和启用的效果实例代码
2017/10/29 Javascript
nodejs中方法和模块用法示例
2018/12/24 NodeJs
js字符串处理之绝妙的代码
2019/04/05 Javascript
小程序rich-text组件如何改变内部img图片样式的方法
2019/05/22 Javascript
[17:36]VG战队纪录片
2014/08/21 DOTA
Python及Django框架生成二维码的方法分析
2018/01/31 Python
PyTorch的深度学习入门之PyTorch安装和配置
2019/06/27 Python
python GUI库图形界面开发之PyQt5中QMainWindow, QWidget以及QDialog的区别和选择
2020/02/26 Python
详解HTML5中ol标签的用法
2015/09/08 HTML / CSS
英国最大的奢侈珠宝和手表网站:C W Sellors
2017/02/10 全球购物
澳大利亚手表品牌:Time IV Change
2018/10/06 全球购物
New Balance德国官方网站:购买鞋子和服装
2019/08/31 全球购物
优秀员工个人的自我评价
2013/11/29 职场文书
受欢迎的大学生自我评价
2013/12/05 职场文书
个人自荐信
2013/12/05 职场文书
写求职信要注意什么问题
2014/04/12 职场文书
2014幼儿园教师师德师风演讲稿
2014/09/10 职场文书
教育实践活动对照检查材料
2014/09/23 职场文书
群众对十八届四中全会的期盼
2014/10/17 职场文书
撤诉申请怎么写
2015/05/19 职场文书