基于element-ui对话框el-dialog初始化的校验问题解决


Posted in Javascript onSeptember 11, 2020

不刷新页面重新打开el-dialog时,如果我们绑定了rules或者某个值需要required,它总会自动校验。

查看了多个博文,发现常用的有两种解决方法(下列方法都可以在其他博文查看,不再细写,如有需要请自行查询):

1.给dialog套上v-if ;

2.在关闭dialog时,监听关闭回调,清除校验。

我在自己的项目里使用了上述两种方法,都不太好用,自己琢磨出了另一种方法:

<el-dialog @open="openDialog()">

</el-dialog>

调用dialog打开的回调

methods:
 
openDialog(){
  this.$nextTick(() => {
    this.$refs.dataForm.clearValidate();
  })
}

初始化dialog时, 拿到变化后的dom, 进行清除校验

补充知识:Cannot read property 'resetFields' of undefined 问题及引申

问题描述: 使用element开发我的后台系统,编辑和新增使用了同一个弹出框<el-dialog><el-form></el-form></el-dialog>

绑定了数据data里的commentForm对象

为了在新增弹出框清空表单, 使用了this.$refs[formName].resetFields()

每次第一次点击新增显示弹出框,都会报错

"[Vue warn]: Error in event handler for "click": "TypeError: Cannot read property 'resetFields' of undefined""

问题原因:

mouted加载table数据以后,隐藏的弹出框并没有编译渲染进dom里面。

所以@click="dialogFormVisible = true;resetForm('dlgForm')"click弹出的时候$refs并没有获取到dom元素导致 'resetFields' of undefined

解决方法:

1、($nextTick dom下一次更新之后)

resetForm(formName) {
        this.$nextTick(()=>{
          this.$refs[formName].resetFields();
        })        
      },

2、(如果是第一次就点击新增就没必要reset, 根据元素undefined判断)

if (this.$refs[formName] !== undefined) {
          this.$refs[formName].resetFields();
        }

注意事项:对DOM一系列的js操作最好都要放进Vue.nextTick()的回调函数中

以上这篇基于element-ui对话框el-dialog初始化的校验问题解决就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript prototype 原型链
Mar 12 Javascript
jQuery Ajax文件上传(php)
Jun 16 Javascript
javascript 写类方式之八
Jul 05 Javascript
使用JavaScript的AngularJS库编写hello world的方法
Jun 23 Javascript
Bootstrap弹出框(modal)垂直居中的问题及解决方案详解
Jun 12 Javascript
基于JavaScript实现自定义滚动条
Jan 25 Javascript
轻松学习Javascript闭包
Mar 01 Javascript
vuejs父子组件之间数据交互详解
Aug 09 Javascript
详解Vue.js Mixins 混入使用
Sep 15 Javascript
Vue中使用vee-validate表单验证的方法
May 09 Javascript
js实现前面自动补全位数的方法
Oct 10 Javascript
JavaScript函数重载操作实例浅析
May 02 Javascript
vue界面发送表情的实现代码
Sep 11 #Javascript
在vue中配置不同的代理同时访问不同的后台操作
Sep 11 #Javascript
vscode中的vue项目报错Property ‘xxx‘ does not exist on type ‘CombinedVueInstance<{ readyOnly...Vetur(2339)
Sep 11 #Javascript
Vue proxyTable配置多个接口地址,解决跨域的问题
Sep 11 #Javascript
关于ES6尾调用优化的使用
Sep 11 #Javascript
在js文件中引入(调用)另一个js文件的三种方法
Sep 11 #Javascript
Vue项目开发常见问题和解决方案总结
Sep 11 #Javascript
You might like
php中如何同时使用session和cookie来保存用户登录信息
2013/07/05 PHP
PHP中使用sleep造成mysql读取失败的案例和解决方法
2014/08/21 PHP
Yii获取当前url和域名的方法
2015/06/08 PHP
PHP从二维数组得到N层分类树的实现代码
2016/10/11 PHP
Laravel框架路由和控制器的绑定操作方法
2018/06/12 PHP
JavaScript 学习笔记之基础中的基础
2015/01/13 Javascript
javascript实现给定半径求出圆的面积
2015/06/26 Javascript
JavaScript中的闭包
2016/02/24 Javascript
JavaScript数组实现数据结构中的队列与堆栈
2016/05/26 Javascript
详解vuex之store源码简单解析
2019/06/13 Javascript
JavaScript实现的开关灯泡点击切换特效示例
2019/07/08 Javascript
在Vue中创建可重用的 Transition的方法
2020/06/02 Javascript
vue基于better-scroll实现左右联动滑动页面
2020/06/30 Javascript
在Python的gevent框架下执行异步的Solr查询的教程
2015/04/16 Python
使用Python的Flask框架表单插件Flask-WTF实现Web登录验证
2016/07/12 Python
django 开发忘记密码通过邮箱找回功能示例
2018/04/17 Python
基于Python列表解析(列表推导式)
2018/06/23 Python
Python中如何导入类示例详解
2019/04/17 Python
详解python数据结构和算法
2019/04/18 Python
python实现给微信指定好友定时发送消息
2019/04/29 Python
django admin组件使用方法详解
2019/07/19 Python
深入了解Python在HDA中的应用
2019/09/05 Python
python 通过手机号识别出对应的微信性别(实例代码)
2019/12/22 Python
python 使用事件对象asyncio.Event来同步协程的操作
2020/05/04 Python
关于 HTML5 的七个传说小结
2012/04/12 HTML / CSS
爱尔兰灯和灯具网上商店:Lights.ie
2018/03/26 全球购物
Clearly澳大利亚:购买眼镜、太阳镜和隐形眼镜
2018/04/26 全球购物
Perfume’s Club法国站:购买香水和化妆品
2019/05/02 全球购物
财务内勤岗位职责
2014/04/17 职场文书
倡议书格式模板
2014/05/13 职场文书
公司法定代表人授权委托书
2014/09/29 职场文书
2014年化妆品销售工作总结
2014/12/01 职场文书
初中作文评语
2014/12/25 职场文书
学校国庆节活动总结
2015/03/23 职场文书
《小摄影师》教学反思
2016/02/18 职场文书
Apache SeaTunnel实现 非CDC数据抽取
2022/05/20 Servers