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(放置)组件. 一.加 ...
随机推荐
- 201871010128-杨丽霞《面向对象程序设计(java)》第十六周学习总结
201871010128-杨丽霞<面向对象程序设计(java)>第十六周学习总结(1分) 项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-dai ...
- C#基础表达式语句详解(上)
本节内容: 1.表达式的定义: 2.各类表达式概览: 3.语句的定义: 4.语句详解: 1.表达式的定义: 1.1什么是表达式: (定义见下图)各类编程语言对表达式的实现不尽相同,但大体上都符合这个定 ...
- Shell编程 | 脚本参数与交互及常见问题
在执行一个脚本程序时,会经常需要向脚本传递一些参数,并根据输入的参数值生成相应的数据或执行特定的逻辑. 向脚本传递参数 执行Shell脚本时可以带有参数,在Shell脚本中有变量与之对应进行引用.这类 ...
- Vue之挂载点、变量、事件、js对象、文本指令、过滤器、事件指令和属性指令
1.vue导入-挂载点 <!DOCTYPE html> <html lang="zh"> <head> <meta charset=&qu ...
- LG2893/POJ3666 「USACO2008FEB」Making the Grade 线性DP+决策集优化
问题描述 LG2893 POJ3666 题解 对于\(A\)中的每一个元素,都将存在于\(B\)中. 对\(A\)离散化. 设\(opt_{i,j}\)代表\([1,i]\),结尾为\(j\)的最小代 ...
- 实现一个new操作符
new 操作符做了这些事: 1.它创建了一个全新的对象: 2.它会被执行[[Prototype]](也就是__proto__)链接: 3.它使this指向新创建的对象: 4.通过new创建的每个对象最 ...
- Spring Boot中整合Sharding-JDBC读写分离示例
在我<Spring Cloud微服务-全栈技术与案例解析>书中,第18章节分库分表解决方案里有对Sharding-JDBC的使用进行详细的讲解. 之前是通过XML方式来配置数据源,读写分离 ...
- 一、WebAPI自定义过滤器的使用
一.WebAPI自定义过滤器的使用 1.注册过滤器 using System.Web.Http; using KYINT.WebAPIService.Handler; namespace KYINT. ...
- C#自定义特性的使用
特性类的使用过程: 第一步:定义一个特性类,定义一些成员来包含验证时需要的数据:第二步:创建特性类实例:创建一个特性类的实例,里面包含着验证某一个属性或者字段需要的数据.将该实例关联到某个属性上面.第 ...
- .NET Core:SignalR
在Startup中的ConfigureServices方法中配置:services.AddSignalR(); 跨域设置中需要更改设置:services.AddCors(options => o ...