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

最近在写增删改查，在新增的时候要弹出对话框填写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 对话框取消 表单验证重置示例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue+elementUI 复杂表单的验证、数据提交方案问题

    当我们在做后台管理系统时,经常会遇到非常复杂的表单: 表单项非常多 在各种表单类型下,显示不同的表单项 在某些条件下,某些表单项会关闭验证 每个表单项还会有其他自定义逻辑,比如 输入框可以插入模板变量.输入字符数量显示.图片上传并显示.富文本 ... 在这种错综复杂的情况下,完成表单的验证和提交 可以查看具体例子:例子中省略了很多琐碎的功能,只保留整体的复杂表单框架,用于展示解决方案 方案1: 在一个 vue 文件中 所有的表单项显示隐藏.验证.数据获取.提交.自定义等逻辑放在一起 v-if/v

  • vue element动态渲染、移除表单并添加验证的实现

    又接到新需求了吧~~ 背景 在一个大表单里,有可能会出现这种需求,用户可以自己操作动态添加.移除表单,更加个性化的效果. 常见于填写个人信息.附加内容的表单 例如: "工作经历"可以用户自己点击继续添加按钮,在原有的表单后面 append 多一个表单,不需要就点击右上方 X 按钮移除 问题 在实现之前,提出几个问题 vue 怎么动态渲染或移除表单上去 v-model 怎么绑定动态添加表单的 value 值 动态新增的表单如何验证 动态表单怎么填写对应的 prop ... 好吧,我当时也

  • vue中使用element-ui进行表单验证的实例代码

    vue中使用element-ui进行表单验证的实例代码

    element-ui 中验证 一.简单逻辑验证(直接使用rules) 实现思路 •html中给el-form增加 :rules="rules" •html中在el-form-item 中增加属性 prop="名称" •js中直接在data中定义rules:{} •html部分 <el-form ref="form" :rules="rules" :model="form" label-width=&q

  • vue+element实现表单校验功能

    要实现这个功能其实并不难,element组件直接用就可以, 但是我在使用过程中碰到了几个坑,就记录下来,分享给大家,避免落坑,话不多说,直接上过程...... 表单校验功能: 实现这个功能,总共分为以下4布: 1.在el-form标签中定义:rules="rules";ref="reference" 2.在el-form-item定义prop="name"; 3.在选项data中定义rules校验规则; 4.在提交方法中检查用户行为 templa

  • element ui里dialog关闭后清除验证条件方法

    关闭dialog触发事件 //vue <!--添加用户dialog begin--> <el-dialog title="编辑用户" :visible.sync="dialogFormVisible" custom-class="editDialog" :close-on-click-modal="false" :before-close = "cleanContent" :show-cl

  • Vue ElementUI之Form表单验证遇到的问题

    Vue ElementUI之Form表单验证遇到的问题

    首先说一下 我在form表单里面遇见的坑: 1.例如我要给后台传的不是对象,而是一个数组,怎么写验证? 2.比如我有四个弹出框,都要做验证,这个时候就要注意了,每一个弹出框的ref都不能给的一样,并且一定要与当前弹框的确定或者保存按钮一一对应,例如:第一个弹框的ref='number',按钮的click比如为xxxxxx('number'),第二个弹出框的ref='number2',对应的按钮>>xxxxxx('number2').如果ref用的都一样,就会出现,点击下一步我没有去做验证,我再

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

    最近在写增删改查,在新增的时候要弹出对话框填写form表单信息,发现对话框右上角的小X和右下角的取消不是一个事件,我想在点击它们两个的时候都可以重置表单,最终解决,如下. vue: <el-dialog :title="titleName[dialogStatus]" :visible.sync="dialogFormVisible" @close="closeDialog" :close-on-click-modal="fals

  • Vue快速实现通用表单验证的示例代码

    本文开篇第一句话,想引用鲁迅先生<祝福>里的一句话,那便是:"我真傻,真的,我单单知道后端整天都是CRUD,我没想到前端整天都是Form表单".这句话要从哪里说起呢?大概要从最近半个月的"全栈工程师"说起.项目上需要做一个城市配载的功能,顾名思义,就是通过框选和拖拽的方式在地图上完成配载.博主选择了前后端分离的方式,在这个过程中发现:首先,只要有依赖jQuery的组件,譬如Kendoui,即使使用了Vue,依然需要通过jQuery去操作DOM.其次,只有

  • vue ElementUI的from表单实现登录效果的示例

    vue ElementUI的from表单实现登录效果的示例

    目录 1.通过ElementUI构建基本的样式 2.用点击提交按钮将 将账号密码框内的内容 传给后台数据 总结 1.通过ElementUI构建基本的样式 不了解ElementUI官方网站 https://element.eleme.cn/#/zh-CN 对  ElementUI 进行基本的了解. 1.1  ElementUI的使用 首先在项目中 通过指令 npm i element-ui S  安装ElementUI 1.2  然后在官网中找到 from表单 然后就可以基本的布局了 那么下面是我

  • 基于Vue+elementUI实现动态表单的校验功能(根据条件动态切换校验格式)

    基于Vue+elementUI实现动态表单的校验功能(根据条件动态切换校验格式)

    前言 开发过程中遇到了一个需求,根据用户选择的联系方式,动态改变输入框的检验条件,并且整个表单是可以增加的 在线访问:动态表单校验 github(欢迎star): https://github.com/Mrblackant. .. 思考几个问题 1.整个表单是可新增的,所以要遍历生成: 2.联系方式(手机/座机)的切换,是要切换后边不同类型输入框还是只改变校验规则(本篇是动态改变校验规则) 实现 1.elementui的form表单实现校验的时候要给当前el-form-item加上prop属性,

  • Vue使用vux-ui自定义表单验证遇到的问题及解决方法

    Vue使用vux-ui自定义表单验证遇到的问题及解决方法

    初学框架vue搭配vux使用发现这个UI库使用有些力不从心.下面说说自己在表单验证过程遇到的两个需求问题及解决的方法. 1.使用x-input组件可知,官方只给了三种类型的is-type验证器,分别是:email,china-name,china-mobile,其他需要自己自定义验证器,怎么写验证器? 解决方法:自定义is-type验证器(试验过可以在valid使用正则验证) <x-input type="number" v-model="code" plac

  • Vue中使用vee-validate表单验证的方法

    Vue项目遇到要表单验证了吧,对我来说表单验证是个很纠(dan)结(teng)的内容,各种判断凌乱到飞起.往常使用jquery的validate插件做表单验证方便吧,你也可以在Vue里引入jquery的validate插件(如何引入jquery在我上一篇博文有介绍,点击查看).但是我们是做vue项目也,不到实在解决不了还是建议不要引入,因为Vue自己就有表单验证的插件,那就是vee-validate. 我在这并不是详细讲解vee-validate的使用功能,只是快速了解如何在项目里使用vee-v

  • vee-validate vue 2.0自定义表单验证的实例

    亲测可用 学习vee-validate,首先可以去阅读官方文档,更为详细可以阅读官网中的规则. 一.安装 您可以通过npm或通过CDN安装此插件. 1. NPM npm install vee-validate --save 2. CDN <script src="path/to/vue.js"></script> <script src="path/to/vee-validate.js"></script> <

  • Vue快速实现通用表单验证功能

    本文开篇第一句话,想引用鲁迅先生<祝福>里的一句话,那便是:"我真傻,真的,我单单知道后端整天都是CRUD,我没想到前端整天都是Form表单".这句话要从哪里说起呢?大概要从最近半个月的"全栈工程师"说起.项目上需要做一个城市配载的功能,顾名思义,就是通过框选和拖拽的方式在地图上完成配载.博主选择了前后端分离的方式,在这个过程中发现:首先,只要有依赖jQuery的组件,譬如Kendoui,即使使用了Vue,依然需要通过jQuery去操作DOM.其次,只有

  • Vue快速实现通用表单验证的方法

    本文开篇第一句话,想引用鲁迅先生<祝福>里的一句话,那便是:"我真傻,真的,我单单知道后端整天都是CRUD,我没想到前端整天都是Form表单".这句话要从哪里说起呢?大概要从最近半个月的"全栈工程师"说起.项目上需要做一个城市配载的功能,顾名思义,就是通过框选和拖拽的方式在地图上完成配载.博主选择了前后端分离的方式,在这个过程中发现:首先,只要有依赖jQuery的组件,譬如Kendoui,即使使用了Vue,依然需要通过jQuery去操作DOM.其次,只有

随机推荐