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(放置)组件. 一.加 ...
随机推荐
- 解决Vue调用springboot接口403跨域问题
最近在做一个前后端分离的项目, 前端用的是Vue后端使用的是springboot, 在项目整合的时候发现前端调用后端接口报错403跨域请求问题 前端跨域请求已解决, 那么问题就出在后端了, 找了一些资 ...
- Linux上安装nginx
环境:centos7 nginx1.16.1(源码安装) 一.下载nginx源码包 地址:http://nginx.org/en/download.html Mainline version(主线 ...
- 机器学习(4)——PCA与梯度上升法
主成分分析(Principal Component Analysis) 一个非监督的机器学习算法 主要用于数据的降维 通过降维,可以发现更便于人类理解的特征 其他应用:可视化.去噪 通过映射,我们可以 ...
- Gmail Copilot是什么,有什么作用,好不好
Gmail Copilot是一个Chrome浏览器插件,它构建在Gmail之上; 它自动列出你和联系人的所有电子邮件和对话信息: 它是一个小型CRM,可以让你查看联系人的个人信息快照,以及过去的任何邮 ...
- 笔记3:MySQL数据库
MySQL 1 基本概念 常见sql命令: show database 查看所有数据库 select now(); 显示当前时间 select version(); 显示当前版本 create dat ...
- 面向对象程序设计(java)
201871010136-赵艳强<面向对象程序设计(java)>第二周学习总 第一部分:理论知识学习部分 一.简单的Java程序应运程序 1.标识符0标识符由字母.下划线.美元符号和数 ...
- Spring Cloud Alibaba Sentinel 的配置选项:spring.cloud.sentinel.transport.port,默认值:8719
spring.cloud.sentinel.transport.port 端口配置会在应用对应的机器上启动一个 Http Server,该 Server 会与 Sentinel 控制台做交互.比如 S ...
- R-FCN:
和Faster R-CNN相比,R-FCN具有更深的共享卷积网络层,这样可以获得更加抽象的特征 抽象特征的捕获能否通过“sketch/conceptual...” - guided 来进行?想法还是说 ...
- AWS云部署项目——数据库与服务器
1.连接数据库 选择服务RDS,进入后点击数据库实例,在之前建好的数据库内进行操作 首先是安全组,类似于aws云上的防火墙一样的东西,先设置好公开性,安全组置为default(就是尽量避免测试时访问阻 ...
- Cannot resolve reference to bean 'mongoTemplate' while setting bean property 'mongoOperations'; nested exception is org.springframework.beans.factory.BeanCreationException: Error creating bean with na
问题: Springboot 启动时出错,报没法创建bean的错误,看到nested最后是关于mongoTemplate的错误. 过程: 看网上大多说的是修改mongoTemplate的配置,但是sp ...