vue + ElementUI 关闭对话框清空验证,清除form表单
2017-12-19 10:25
3051 查看
前面跟大家提到过 elementUI验证的问题,那么今天就来看看 点击对话框和关闭按钮 怎么清空验证,清空form表单,避免二次点击还会有 验证错误的提示
1、首先在你的对话框 取消按钮 加一个click事件,例如:(ps::callOf里面的addGroupData和ref一 一对应起来)
2、点击取消按钮,关闭对话框,清除表单验证
3、对话框右上角的close按钮(before-close:关闭前的回调,会暂停 Dialog 的关闭,function(done),done 用于关闭 Dialog。 location.reload:刷新整个页面)
这样就设置好了,不会出现 二次点击时,错误提示还遗留在对话框上
1、首先在你的对话框 取消按钮 加一个click事件,例如:(ps::callOf里面的addGroupData和ref一 一对应起来)
<div slot="footer" class="dialog-footer"> <el-button @click="callOf('addGroupData')">取 消</el-button> <el-button type="primary" @click="addgroupList('addGroupData');">确 定</el-button> </div>
2、点击取消按钮,关闭对话框,清除表单验证
callOf(formName){ this.creatGroup = false; this.$refs[formName].resetFields(); }
3、对话框右上角的close按钮(before-close:关闭前的回调,会暂停 Dialog 的关闭,function(done),done 用于关闭 Dialog。 location.reload:刷新整个页面)
closeDialog(done){ this.$confirm('确认关闭?') .then(_ => { done(); location.reload(); }) .catch(_ => { }); }
这样就设置好了,不会出现 二次点击时,错误提示还遗留在对话框上
相关文章推荐
- vue + ElementUI 关闭对话框清空验证,清除form表单
- vue + ElementUI 关闭对话框清空验证,清除form表单
- vue elementUI之Form表单 验证
- vue elementUI之Form表单 验证
- Vue ElementUI之Form表单验证遇到的问题
- Vue Elementui Form表单验证
- vue+element-ui集成随机验证码+用户名+密码的form表单验证功能
- vue + element-ui 的表单验证失效问题
- Vue Element Form表单时间验证控件使用
- element-ui+vuex共享自定义方法进行表单验证 validator
- vue中使用element-ui进行表单验证的实例代码
- 基于vue2.0前端组件库element中 el-form表单 自定义验证填坑
- Vue ElementUi同时校验多个表单(巧用new promise)
- yii2关闭form表单的实时验证
- ElementUI之表单验证、数据绑定、路由跳转
- 【工作日志】--vue.js下使用element的form表单的注意事项
- vue + elementui表单重置 resetFields问题(无法重置表单)
- 详解ElementUI之表单验证、数据绑定、路由跳转
- vue实现element-ui对话框可拖拽功能
- element-ui表单验证