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 对话框取消 表单验证重置示例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持小牛知识库。
-
本文向大家介绍vue elementui form表单验证的实现，包括了vue elementui form表单验证的实现的使用技巧和注意事项，需要的朋友参考一下 最近我们公司将前端框架由easyui 改为 vue+elementui 。自学vue两周 就开始了爬坑之路。业余时间给大家分享一下心得，技术新手加上第一次分享(小激动)，有什么不足的地方欢迎大家指正，多多交流才能共同进步！ 1.问题 我
-
本文向大家介绍vue+elementUI实现表单和图片上传及验证功能示例，包括了vue+elementUI实现表单和图片上传及验证功能示例的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了vue+elementUI实现表单和图片上传及验证功能。分享给大家供大家参考，具体如下： 最终实现需求如下图： form表单内容与重点人员图片同时上传且图片为必填项 分析弹框页需要解决的问题有： 1、表单内
-
问题内容： 我有一个非常简单的selenium-webdriver脚本。我想使用webdriver进行HTTP身份验证。 脚本： 问题： 抛出 org.openqa.selenium.NoAlertPresentException：不存在警报 题： Webdriver是否仅找到警报对话框作为警报？ 在不使用AutoIt或http：// username：password @somesite的情况下
-
我试图让我的javascript验证电话号码输入，并在用户输入信息不正确时显示消息。我还设置了另外两个输入，所以我复制了其中一个，并用phoneNumber替换了名称，但没有结果。没有HTML的替代品，请它是我必须使用我的评估。 这里我只包含了电话号码输入的代码。http://jsfiddle.net/29ZNV/ 超文本标记语言 JAVASCRIPT
-
本文向大家介绍Android中创建对话框(确定取消对话框、单选对话框、多选对话框)实例代码，包括了Android中创建对话框(确定取消对话框、单选对话框、多选对话框)实例代码的使用技巧和注意事项，需要的朋友参考一下 Android中可以创建三种对话框、确定取消对话框、单选对话框、多选对话框 android中的确定取消对话框演示示例 Android中使用单选对话框的演示案例 android中使用多选
-
本文向大家介绍Vue from-validate 表单验证的示例代码，包括了Vue from-validate 表单验证的示例代码的使用技巧和注意事项，需要的朋友参考一下 前言 需要进行表单数据验证，原先才用html5来完成验证，但是效果很差，也不够灵活，所以需要进行自定义的表单验证，网上的插件都太过庞大，项目并没有这么多的需求。 那让我们自己来写一个吧！ 知识准备 vue的自定义指令 具体可以看