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(放置)组件. 一.加 ...
随机推荐
- CentOs 7.*中配置安装phpMyAdmin的完整步骤记录
phpMyAdmin是一个以PHP为基础,以Web-Base方式架构在网站主机上的MySQL的资料库管理工具.下面这篇文章主要给大家介绍了关于CentOs 7.*中配置安装phpMyAdmin的相关资 ...
- 静态文件 static
一.常见的形式 前面初步搭建Django开局时候就 在 项目路径下 建立了statics 文件夹,然后在 settings.py 文件的末尾添加了 statics 文件夹的绝对路径. # 这个可以给 ...
- linux下各文件夹的结构说明及用途介绍:Linux目录结构介绍
linux下各文件夹的结构说明及用途介绍: /bin:二进制可执行命令. /dev:设备特殊文件. /etc:系统管理和配置文件. /etc/rc.d:启动的配 置文件和脚本. /home:用户主目录 ...
- 004-OpenStack-计算服务
OpenStack-计算服务 [基于此文章的环境]点我快速打开文章 1.控制节点(controller) 1.1 创库授权 nova_api, nova, 和 nova_cell0 mysql CR ...
- 代码审计-sha()函数比较绕过
<?php $flag = "flag"; if (isset($_GET['name']) and isset($_GET['password'])) { var_dump ...
- Java高级——泛型
本文主要讲述泛型的使用 1.在集合中的使用 2.自定义泛型类.泛型接口.泛型方法 3.泛型与继承的关系 4.通配符 由于第一点和第二点在平常的编码工作中已熟练,本文重点讲述后面两点. 直接show t ...
- 8.7 NOIP模拟测试14 旋转子段+走格子+ 柱状图
T1 旋转子段 30% 暴力枚举起点和长度,暴力判断,o(n3) 不知道为什么我拿了40分... 60% 每一个点都有一个固定的旋转中心可以转成固定点,枚举旋转点和长度. 100% 用一个vecto ...
- [LeetCode] 35. Search Insert Position 搜索插入位置
Given a sorted array and a target value, return the index if the target is found. If not, return the ...
- RabbitMQ心跳检测与掉线重连
1.RabbitMQListener,自定义消息监听器 using RabbitMQ.Client; using RabbitMQ.Client.Events; using System; using ...
- 第30课 线程同步(std::condition_variable)
一. 条件变量 (一)条件变量概述 多线程访问一个共享资源(或称临界区),不仅需要用互斥锁实现独享访问避免并发错误,在获得互斥锁进入临界区后,还需检查特定条件是否成立.当某个线程修改测试条件后,将通知 ...