ElementUI如何展开指定Tree树节点
原文: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树节点的更多相关文章
- element-ui组件,全选树节点,新增数据子节点数据,出现回填问题
案情分析:全选后父节点被选中保存,在这个树节点下新增数据时,就会出现,也被选中,事实上数据是没有被选中,也就意味着权限未被配置,而显示是已经配置了,显然这个是一个bug 1.处理前,直接用下面的方法很 ...
- Tree树节点选中及取消和指定节点的隐藏
指定节点变色 指定节点隐藏 单击节点 未选中则选中该节点 已选中则取消该节点 前台: 1.HTML <ul id="listDept" name="listDept ...
- element-ui的Tree树组件使用技巧
目录 1,前言 2,需求 3,解决思路 4,完整代码 5,总结 1,前言 最近这段时间在做一个新的模块,其中有一个三层的树结构,产品经理提出了一个很古怪的需求,整的我只能自己控制树的交互,写完之后,感 ...
- 展开easyui 树节点到某个点
$(function () { $('#tt').tree({ url: '/IS/Department/JsonTree?companyID=@(Request.QueryString[" ...
- 【zTree】zTree展开树节点
今天在做zTree树的时候想着将第一级tree展开,于是利用下面方法: /** * 展开树节点的第一层 */ function openFirstTreenode(){ // 获取树对象 var tr ...
- ztree根据treeId展开指定节点并触发单击事件
ztree.expandNode(ztree.getNodeByParam("id",treeId,null));//展开指定节点 ztree.selectNode(ztree.g ...
- JQuery Easy Ui (Tree树)详解(转)
第一讲:JQuery Easy Ui到底是什么呢? 首先咱们知道JQuery是对Java Script的封装,是一个js库,主要提供的功能是选择器,属性修改和事件绑定等等.. JQuery ui是在j ...
- 数据网格和树-EasyUI Datagrid 数据网格、EasyUI Propertygrid 属性网格、EasyUI Tree 树、EasyUI Treegrid 树形网格
EasyUI Datagrid 数据网格 扩展自 $.fn.panel.defaults.通过 $.fn.datagrid.defaults 重写默认的 defaults. 数据网格(datagrid ...
- 第二百二十六节,jQuery EasyUI,Tree(树)组件
jQuery EasyUI,Tree(树)组件 本节课重点了解 EasyUI 中 Tree(树)组件的使用方法,这个组件依赖于 Draggable(拖 动)和 Droppable(放置)组件. 一.加 ...
随机推荐
- 【Java】理解ClassNotFoundException与NoClassDefFoundError的区别
一.概念上的认识 1)Exception与Error的区别 1.Exception的出现不会导致程序结束,用户程序可以捕获该异常 2.Error的出现会导致程序结束,用户程序无法捕获Error错误 2 ...
- odoo10学习笔记十七:controller
转载请注明原文地址:https://www.cnblogs.com/ygj0930/p/11189391.html 一:controller简述 odoo里面的controller相似于springM ...
- LNK1104 无法打开文件“xxx.lib”
尝试解决方法: 1.找到这个库,把这个库移动到特定的文件夹下,在属性中添加这个库: 具体来说:打开VS项目->项目属性->配置属性->C/C+±>附加包含目录->编辑-& ...
- Hello,DTOS!(中)
org 0x7c00 //主引导程序的入口地址为0x7c00(物理地址),类似于用c或c++程序中的main函数. start: //定义标签,标签的含义就是mov ax,cs这条指令的地址. ...
- USACO Telephone Lines
洛谷 P1948 [USACO08JAN]电话线Telephone Lines https://www.luogu.org/problem/P1948 JDOJ 2556: USACO 2008 Ja ...
- ABP 不包裹返回的数据
告诉abp不包裹返回的数据,返回的数据是什么 就是什么 不用再多包裹一次了. 用在 如:别人需要你提供接口 且给你指定了返回的数据结构. 源码:
- 记一次linux下安装redis, 设置redis服务, 及添加环境变量
一. redis的安装 cd /opt # ...
- 关于指针与引用的差别——C++
准备 https://zhuanlan.zhihu.com/p/27974028 开始 int 是int类型变量声明 int * 是int指针声明,指针其实就是地址变量,用来储存地址值的" ...
- Nginx目录穿越漏洞
Nginx (engine x) 是一个高性能的HTTP和反向代理服务器,也是一个IMAP/POP3/SMTP服务器.Nginx经常被做为反向代理,动态的部分被proxy_pass传递给后端端口,而静 ...
- ros wifi把信号弱的客户端踢出去的脚本
以下脚本为小于75强度的都踢出去 非capman脚本: /interface wireless registration-table :do {:foreach i in=[find] do={:lo ...