其实这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方法无法使用的更多相关文章

  1. vue+element ui 的时间控件选择 年月日时分

    前言:工作中用到 vue+element ui 的前端框架,需要选择年月日时分,但element ui官网demo有没有,所以记录一下.转载请注明出处:https://www.cnblogs.com/ ...

  2. vue+element-ui之tree树形控件有关子节点和父节点之间的各种选中关系详解

    做后端管理系统,永远是最蛋疼.最复杂也最欠揍的事情,也永远是前端开发人员最苦逼.最无奈也最尿性的时刻.蛋疼的是需求变幻无穷,如同二师兄的三十六般变化:复杂的是开发难度寸步难行,如同蜀道难,难于上青天: ...

  3. vue使用树形控件z-tree,动态添加数据,默认展开第一行

    环境:vue 2.9.3; webpack; 插件:z-tree,jquery(cnpm install xxxx) 问题;由于数据量比较多,需要动态加载数据,默认第一次请求的数据是最高一级,然后子集 ...

  4. 在vue中使用 layui框架中的form.render()无效解决办法

    下面简单介绍在vue中使用 layui框架中的form.render()无效解决办法. 原文地址:小时刻个人技术博客 > http://small.aiweimeng.top/index.php ...

  5. VUE.JS 使用axios数据请求时数据绑定时 报错 TypeError: Cannot set property 'xxxx' of undefined 的解决办法

    正常情况下在data里面都有做了定义 在函数里面进行赋值 这时候你运行时会发现,数据可以请求到,但是会报错 TypeError: Cannot set property 'listgroup' of ...

  6. "remote:error:refusing to update checked out branch:refs/heads/master"的解决办法(转)

    https://blog.csdn.net/jacolin/article/details/44014775 在使用Git Push代码到数据仓库时,提示如下错误: [remote rejected] ...

  7. fullpage在vue单页面当中使用会出现的问题以及解决办法

    在 vue 单页面当中发现fullpage会报错,报错信息大概意思为,fullpage不允许初始化多次. 解决办法,在使用fullpage的组件跳转路由进入销毁组件之前的生命周期的时候对fullpag ...

  8. vue 跳转页面返回时tab状态有误的解决办法

    一.前言 最近在做新vue项目的时候遇到了一个问题,就是tab间的切换没有问题,当跳转到其他页面时,且这个页面并非子路由,再用浏览器的返回按钮返回首页时,tab的active始终指向默认的第一个选项. ...

  9. vue页面加载前显示{{代码}}的原因及解决办法

    进入正题,简单说说自己对html中出现{{}}的原因及解决办法: 这样写的话,就会出现{{}}一闪的情况: 原因:html的加载顺序: 解析html结构 -> 加载外部脚本和样式表文件 -> ...

随机推荐

  1. ssh整合oracle数据源报错????

    在SSH整合的时候,引入oracle的pom节点,但是报错,因为没有权限,要手动将Oracle.jar注册到本地仓库 保证你电脑有maven环境,测试 方式为 cmd---->mvn -vers ...

  2. 简单理解epel源

    EPEL源-是什么全称   EPEL源   EPEL (Extra Packages for Enterprise Linux)是基于Fedora的一个项目,为“红帽系”的操作系统提供额外的软件包,适 ...

  3. tcp和udp区别

    1.TCP面向连接(如打电话要先拨号建立连接);UDP是无连接的,即发送数据之前不需要建立连接 2.TCP提供可靠的服务.也就是说,通过TCP连接传送的数据,无差错,不丢失,不重复,且按序到达;UDP ...

  4. DAY 25多态、反射、异常处理

    一.面向对象与面向过程分析 1.print(len('123')) # 面向过程 #清晰知道操作的功能,但不能明确操作的具体对象,需要传入参数. 2.print('123'.__len__()) # ...

  5. NGS概念大科普(转)

    NGS又称为下一代测序技术,高通量测序技术 以高输出量和高解析度为主要特色,能一次并行对几十万到几百万条DNA分子进行序列读取,在提供丰富的遗传学信息的同时,还可大大降低测序费用.缩短测序时间的测序技 ...

  6. A.CTable 自动创建数据表

    1.添加依赖 <!-- A.CTable 自动创建数据表 --> <dependency> <groupId>com.gitee.sunchenbin.mybati ...

  7. js下拉列表选中

    var monthobj = document.getElementById("pid");// for(var i=0; i<monthobj.options.length ...

  8. php获取id

    private static function getClientIp() { if (getenv('HTTP_X_FORWARDED_FOR')) { $tmp = explode(',', ge ...

  9. 初识ldap

    什么是LDAP? LDAP的英文全称是Lightweight Directory Access Protocol,一般都简称为LDAP.它是基于X.500标准的, 但是简单多了并且可以根据需要定制.与 ...

  10. ajax提交不进入后台报415错误

    Unsupported Media Type错误 问题所在为后台缺包和xml配置文档缺配置或配置不正确: Jackson的依赖问题,spring3.x和spring4.x是不同的: spring3.x ...