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 相关文章推荐
Microsoft Ajax Minifier 压缩javascript的方法
Mar 05 Javascript
jquery.pagination.js 无刷新分页实现步骤分享
May 23 Javascript
jQuery中get()方法用法实例
Dec 27 Javascript
Three.js利用性能插件stats实现性能监听的方法
Sep 25 Javascript
element-ui 限制日期选择的方法(datepicker)
May 16 Javascript
解决v-for中使用v-if或者v-bind:class失效的问题
Sep 25 Javascript
深入浅析Vue.js 中的 v-for 列表渲染指令
Nov 19 Javascript
JS学习笔记之原型链和利用原型实现继承详解
May 29 Javascript
jQuery实现验证用户登录
Dec 10 jQuery
微信小程序 wx:for 与 wx:for-items 与 wx:key的正确用法
May 19 Javascript
js实现自定义滚动条的示例
Oct 27 Javascript
JS实现扫雷项目总结
May 19 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
Search Engine Friendly的URL设计
2006/10/09 PHP
php设计模式 Chain Of Responsibility (职责链模式)
2011/06/26 PHP
PHP采集腾讯微博的实现代码
2012/01/19 PHP
JavaScript 编程引入命名空间的方法与代码
2007/08/13 Javascript
解决表单中第一个非隐藏的元素获得焦点的一个方案
2009/10/26 Javascript
如何用js控制frame的隐藏或显示的解决办法
2013/03/20 Javascript
JavaScript仿静态分页实现方法
2015/08/04 Javascript
详解JavaScript语言的基本语法要求
2015/11/20 Javascript
ASP.NET jquery ajax传递参数的实例
2016/11/02 Javascript
jQuery+PHP+Mysql实现抽奖程序
2020/04/12 jQuery
原生JS实现不断变化的标签
2017/05/22 Javascript
纯js实现的积木(div层)拖动功能示例
2017/07/19 Javascript
详解js实时获取并显示当前时间的方法
2019/05/10 Javascript
微信小程序可滑动周日历组件使用详解
2019/10/21 Javascript
JavaScript类的继承多种实现方法
2020/05/30 Javascript
VUE实时监听元素距离顶部高度的操作
2020/07/29 Javascript
[53:52]EG vs VGJ.T 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python图像灰度变换及图像数组操作
2016/01/27 Python
python 基础教程之Map使用方法
2017/01/17 Python
python分割列表(list)的方法示例
2017/05/07 Python
利用Python破解斗地主残局详解
2017/06/30 Python
Python开发的HTTP库requests详解
2017/08/29 Python
python3下使用cv2.imwrite存储带有中文路径图片的方法
2018/05/10 Python
python实现自动发送报警监控邮件
2018/06/21 Python
nohup后台启动Python脚本,log不刷新的解决方法
2019/01/14 Python
python文本数据处理学习笔记详解
2019/06/17 Python
pandas 选取行和列数据的方法详解
2019/08/08 Python
使用python实现希尔、计数、基数基础排序的代码
2019/12/25 Python
Python 如何展开嵌套的序列
2020/08/01 Python
python爬虫构建代理ip池抓取数据库的示例代码
2020/09/22 Python
Python3.7安装PyQt5 运行配置Pycharm的详细教程
2020/10/15 Python
澳洲健康食品网上商店:Aussie Health Products
2018/06/15 全球购物
Fossil德国官网:化石手表、手袋、珠宝及配件
2019/12/07 全球购物
高一自我鉴定
2013/12/17 职场文书
vue2实现provide inject传递响应式
2021/05/21 Vue.js
Python 中面向接口编程
2022/05/20 Python