vue的$nextTick使用总结,this.$refs为undefined的解决办法,element Ui的树形控件setCheckedKeys方法无法使用
其实这3个讲的是一个问题,先说下问题,我在watch里设置一个监听,当弹窗打开时,自动添加树形的默认选中项,
但奇怪的是this.$refs为undefined,自然setCheckedKeys无法使用,这个时候就要用到$nextTick,不懂的朋友先去百度下,
大致来说就是一个虚拟dom变成真实之后的一个回调,只有在回调里面才能获取到$refs,问题自然就解决了
watch: {
dialogVisible (val) {
if (val) {
this.setDefaultChecked() // 如果为true。那么调用设置树形默认值的方法
}
}
},
methods: {
setDefaultChecked () {
this.$nextTick(() => {
this.$refs.Tree.setCheckedKeys(this.CheckedArr) // CheckedArr 一个选中的数组element Ui的东西,关键是看$nextTick的用法
})
},
}
总结一下,以后this.$refs为undefined的时候,不妨考虑下是不是真实dom还没有形成,可以用 this.$nextTick包裹一下试试,这也是 this.$nextTick我目前使用到的地方
vue的$nextTick使用总结,this.$refs为undefined的解决办法,element Ui的树形控件setCheckedKeys方法无法使用的更多相关文章
- vue+element ui 的时间控件选择 年月日时分
前言:工作中用到 vue+element ui 的前端框架,需要选择年月日时分,但element ui官网demo有没有,所以记录一下.转载请注明出处:https://www.cnblogs.com/ ...
- vue+element-ui之tree树形控件有关子节点和父节点之间的各种选中关系详解
做后端管理系统,永远是最蛋疼.最复杂也最欠揍的事情,也永远是前端开发人员最苦逼.最无奈也最尿性的时刻.蛋疼的是需求变幻无穷,如同二师兄的三十六般变化:复杂的是开发难度寸步难行,如同蜀道难,难于上青天: ...
- vue使用树形控件z-tree,动态添加数据,默认展开第一行
环境:vue 2.9.3; webpack; 插件:z-tree,jquery(cnpm install xxxx) 问题;由于数据量比较多,需要动态加载数据,默认第一次请求的数据是最高一级,然后子集 ...
- 在vue中使用 layui框架中的form.render()无效解决办法
下面简单介绍在vue中使用 layui框架中的form.render()无效解决办法. 原文地址:小时刻个人技术博客 > http://small.aiweimeng.top/index.php ...
- VUE.JS 使用axios数据请求时数据绑定时 报错 TypeError: Cannot set property 'xxxx' of undefined 的解决办法
正常情况下在data里面都有做了定义 在函数里面进行赋值 这时候你运行时会发现,数据可以请求到,但是会报错 TypeError: Cannot set property 'listgroup' of ...
- "remote:error:refusing to update checked out branch:refs/heads/master"的解决办法(转)
https://blog.csdn.net/jacolin/article/details/44014775 在使用Git Push代码到数据仓库时,提示如下错误: [remote rejected] ...
- fullpage在vue单页面当中使用会出现的问题以及解决办法
在 vue 单页面当中发现fullpage会报错,报错信息大概意思为,fullpage不允许初始化多次. 解决办法,在使用fullpage的组件跳转路由进入销毁组件之前的生命周期的时候对fullpag ...
- vue 跳转页面返回时tab状态有误的解决办法
一.前言 最近在做新vue项目的时候遇到了一个问题,就是tab间的切换没有问题,当跳转到其他页面时,且这个页面并非子路由,再用浏览器的返回按钮返回首页时,tab的active始终指向默认的第一个选项. ...
- vue页面加载前显示{{代码}}的原因及解决办法
进入正题,简单说说自己对html中出现{{}}的原因及解决办法: 这样写的话,就会出现{{}}一闪的情况: 原因:html的加载顺序: 解析html结构 -> 加载外部脚本和样式表文件 -> ...
随机推荐
- python的GIL
GIL 是python的全局解释器锁,同一进程中假如有多个线程运行,一个线程在运行python程序的时候会霸占python解释器(加了一把锁即GIL),使该进程内的其他线程无法运行,等该线程运行完后其 ...
- MVC基本登陆与验证码功能实现
一.基本登陆实现与验证码功能实现,该功能是和spring.net功能集合使用的,因为后面要用到验证是否处于登陆状态 1. 先构建一个登陆页面 @{ Layout = null; } <!DOCT ...
- 使用jQuery修改带有!important 的强制样式
我们习惯性的会用这种方法进行修改: $(".test").css("width","100px !important"); 但是往往是修改失 ...
- k个一组翻转链表(java实现)
题目: 给出一个链表,每 k 个节点一组进行翻转,并返回翻转后的链表. k 是一个正整数,它的值小于或等于链表的长度.如果节点总数不是 k 的整数倍,那么将最后剩余节点保持原有顺序. 示例 : 给定这 ...
- 第一章 Java语言概述1
1.人机交互有两种方法:一种是图形化界面,一种是命令行方式 2.如何打开命令行:开始-在运行命令行中输入cmd 3.常用的DOS命令: dir(directory):列出当前目录下文件及文件夹 md( ...
- Java核心技术卷一 · 笔记(2)
目录 1.多态.动态绑定 2.覆盖 3.阻止继承:final 类和方法 4.抽象类(abstract修饰) 5. 4 个访问修饰符: 6.toString() 7.对设计继承关系很有帮助的建议 8.接 ...
- SpringBoot使用日志
1.日志框架 日志门面 日志实现 JCL.SLF4J.jboss-logging Log4j.JUL.Log4j2.Logback 日志门面:SLF4J 日志实现:Logback SpringBoot ...
- mysql5.7 for windows二进制安装及配置
1)mysql5.7二进制软件下载 下载地址:https://dev.mysql.com/downloads/mysql/5.7.html#downloads 下载软件:mysql-5.7.25-wi ...
- nginx 出现504 Gateway Time-out的解决方法
本文介绍nginx出现504 Gateway Time-out问题的原因,分析问题并提供解决方法. 1.问题分析nginx访问出现504 Gateway Time-out,一般是由于程序执行时间过长导 ...
- kafka 心跳和 reblance
kafka 的心跳是 kafka consumer 和 broker 之间的健康检查,只有当 broker coordinator 正常时,consumer 才会发送心跳. consumer 和 re ...