原文:https://blog.csdn.net/gaojie_csdn/article/details/80738488

【问题】

在页面使用ElementUI的时候,想做出一个主动展开树节点的效果,但是只有点击边上三角形才能够展开,查了element文档,没有找到方法
解决方案

对于前端问题有个很好的工具,就是打印日志,于是在代码里面找到指定对象,打印日志去查找

下面是我的树,别名为 tree,点击多选框的事件为 handleCheck

<el-tree
ref="tree"
show-checkbox
:check-on-click-node="true"
:expand-on-click-node="true"
:data="categorys"
node-key="id"
:props="defaultProps"
@check="handleCheck"
@node-expand="handleNodeExpand"
@node-click="handleNodeClick"
@check-change="handleCheckChange"/>
点击复选框对应监听事件的方法,携带了三个参数,第一个为当前节点的数据,由于我只需要第一个,所以我只用了第一个

// 点击复选框
handleCheck(data){
console.log(this.$refs.tree.store);
this.$refs.tree.store.nodesMap[data.id].expanded = true;
data.unfold = true;
},

打印日志代码:在浏览器按F12打开控制台,然后点击多选框

console.log(this.$refs.tree.store)

此处的266就刚好是节点 id,可以从data参数里面获取,所以我就可以通过下面方式获取该节点,并修改展开属性,达到展开节点的目的,自己使用时需要找对层级关系

this.$refs.tree.store.nodesMap[data.id].expanded = true;

ElementUI如何展开指定Tree树节点的更多相关文章

  1. element-ui组件,全选树节点,新增数据子节点数据,出现回填问题

    案情分析:全选后父节点被选中保存,在这个树节点下新增数据时,就会出现,也被选中,事实上数据是没有被选中,也就意味着权限未被配置,而显示是已经配置了,显然这个是一个bug 1.处理前,直接用下面的方法很 ...

  2. Tree树节点选中及取消和指定节点的隐藏

    指定节点变色 指定节点隐藏 单击节点 未选中则选中该节点 已选中则取消该节点 前台: 1.HTML <ul id="listDept" name="listDept ...

  3. element-ui的Tree树组件使用技巧

    目录 1,前言 2,需求 3,解决思路 4,完整代码 5,总结 1,前言 最近这段时间在做一个新的模块,其中有一个三层的树结构,产品经理提出了一个很古怪的需求,整的我只能自己控制树的交互,写完之后,感 ...

  4. 展开easyui 树节点到某个点

    $(function () { $('#tt').tree({ url: '/IS/Department/JsonTree?companyID=@(Request.QueryString[" ...

  5. 【zTree】zTree展开树节点

    今天在做zTree树的时候想着将第一级tree展开,于是利用下面方法: /** * 展开树节点的第一层 */ function openFirstTreenode(){ // 获取树对象 var tr ...

  6. ztree根据treeId展开指定节点并触发单击事件

    ztree.expandNode(ztree.getNodeByParam("id",treeId,null));//展开指定节点 ztree.selectNode(ztree.g ...

  7. JQuery Easy Ui (Tree树)详解(转)

    第一讲:JQuery Easy Ui到底是什么呢? 首先咱们知道JQuery是对Java Script的封装,是一个js库,主要提供的功能是选择器,属性修改和事件绑定等等.. JQuery ui是在j ...

  8. 数据网格和树-EasyUI Datagrid 数据网格、EasyUI Propertygrid 属性网格、EasyUI Tree 树、EasyUI Treegrid 树形网格

    EasyUI Datagrid 数据网格 扩展自 $.fn.panel.defaults.通过 $.fn.datagrid.defaults 重写默认的 defaults. 数据网格(datagrid ...

  9. 第二百二十六节,jQuery EasyUI,Tree(树)组件

    jQuery EasyUI,Tree(树)组件 本节课重点了解 EasyUI 中 Tree(树)组件的使用方法,这个组件依赖于 Draggable(拖 动)和 Droppable(放置)组件. 一.加 ...

随机推荐

  1. 11、shell_sed

    正则表达式:正则表达式,就是用一种模式,去匹配一类字符串的公式. 正则表达式的解释是用正则表达式引擎来实现的,常用正则表达式引擎有两类: 基本正则.扩展正则.   正则表达式基础: 正则表达式是由一些 ...

  2. Transformer模型---encoder

    一.简介 论文链接:<Attention is all you need> 由google团队在2017年发表于NIPS,Transformer 是一种新的.基于 attention 机制 ...

  3. 每天一套题打卡|河南省第七届ACM/ICPC

    A 海岛争霸 题目:Q次询问,他想知道从岛屿A 到岛屿B 有没有行驶航线,若有的话,所经过的航线,危险程度最小可能是多少. 多源点最短路,用floyd 在松弛更新:g[i][k] < g[i][ ...

  4. vue项目实基础到实战,入门到精通,移动商城

    最近发现许多的朋友都问我有没有vue项目的案例学习,最近正在学习vue,在这可以分享给大家,希望大家学有所成,相互交流共同进步,先不说了,吃个宵夜. 就这么多吧,需要的可以在下方留言或者加qq:116 ...

  5. loadrunner 集合点设置2

    1.集合点的含义       当通过controller虚拟多个用户执行该脚本时.用户的启动或运行步骤不一定都是同步的,集合点是在脚本的某处设置一个标记.当有虚拟用户运行到这个标记处时,停下等待,直到 ...

  6. echars 饼状图 轮循 水平翻转

    code: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  7. AndroidStdio模拟器打不开报错 Guest isn't online after 7 seconds

    开了好几次模拟器,始终运行不出来原来的一个项目.报错如下: 解决方案: 经过百度,可能是Android Studio 3.0升级到3.0.1,启动原来建好的模拟器废掉了. 找到你软件中的 建议选择屏幕 ...

  8. Python进阶-XIV 面向对象初步

    1.面向对象的引入 def Person(*args): ''' 定义一个人 :param args: 人的属性 :return: 人的所有属性的字典 ''' info = {} info['name ...

  9. java实体 和 xml相互转换

    参考: https://blog.csdn.net/LookForDream_/article/details/88884316 https://zhuchengzzcc.iteye.com/blog ...

  10. Shell编程——环境变量

    在Shell程序启动时会自动定义一组变量,这组变量就是环境变量,系统中的所有命令都可以使用这些变量参数. 1.如果在父Shell定义环境变量,在子Shell中也能查看到. (1)父Shell与子She ...