原文: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. Debian x7中如何添加永久环境变量

    一.进入/etc/bash.bashrc(使用文本编辑器打开) 二.在最后面添加新的环境变量 export PATH=usr/...(路径):$PATH 三.保存后,打开终端,输入source ~/. ...

  2. java1.8新特性整理(全)

    版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/yitian_66/article/deta ...

  3. shell的使用技巧

    推荐使用的远程连接软件以及vi编辑器的基本使用 简介:远程连接软件 与 vi命令的基本使用 (1)软件: CRT 已经下载好的压缩包 直接双击 点击新建会话  点击下一步  输入主机名  下一步    ...

  4. GAN与VAE

    经典算法·GAN与VAE Generative Adversarial Networks 及其变体 生成对抗网络是近几年最为经典的生成模型的代表工作,Goodfellow的经典工作.通过两个神经网络结 ...

  5. .net使用IIdentity和IPrincipal实现自定义身份及权限认证【转】

    1,通过继承BasePage页实现角色权限控制 context.User中保存的信息就是相关的角色与权限信息.Context.User类型为System.Security.Principal.IPri ...

  6. appium--多进程启动多设备

    前戏 在前面我们都是使用一个机器进行测试,在做app自动化的时候,我们要测不同的机型,也就是兼容性测试,如果一台一台设备去执行,那就显的太麻烦了.所以经常需要我们启动多个设备,同时跑自动化测试用例,要 ...

  7. pytorch的state_dict()拷贝问题

    先说结论,model.state_dict()是浅拷贝,返回的参数仍然会随着网络的训练而变化.应该使用deepcopy(model.state_dict()),或将参数及时序列化到硬盘. 再讲故事,前 ...

  8. Scala字符串插值 - StringContext

    翻译自:STRING INTERPOLATION 简介 自2.10.0版本开始,Scala提供了一种新的机制来根据数据生成字符串:字符串插值.字符串插值允许使用者将变量引用直接插入处理过的字面字符中. ...

  9. Python 标准数据类型

    标准数据类型: Number(数字)----int float bool complex(复数) String(字符串) List(列表) Tuple(元组) Dictionary(字典) Set(集 ...

  10. Failed to start LSB: Bring up/down networking 另外一个偏方

    之前网卡启动不了,会是配置不对,或者是移动了虚拟机导致hwaddr发生了变化. 但是今天没改动什么,突然用不了,一直报错Failed to start LSB: Bring up/down .... ...