关于ElementUi中树形控件默认显示二级节点

最新推荐文章于 2023-09-20 15:07:01 发布
最新推荐文章于 2023-09-20 15:07:01 发布
阅读量3.4k 收藏 7
点赞数
文章标签： elementui 前端 javascript 前端框架
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lee_glj/article/details/121809112
版权

需要用到这个属性。设置了这个属性之后，在data里定义一个数据用来存放默认展开的节点的id。我这里定义了TreeArr[]
在这里插入图片描述
然后在加载树图数据的方法中遍历找到第一个节点的id，把这个id放到刚才定义的TreeArr中即可。
在这里插入图片描述
补充：如果想展开第二级节点就把第一级的id放进去，如果想展开第三级节点，就把第二级节点的id放进去。效果如图：
在这里插入图片描述

lee_glj
关注
  • 0
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue elementUI tree树形控件获取父节点ID的实例
10-18
今天小编就为大家分享一篇vue elementUI tree树形控件获取父节点ID的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
el-tree默认展开第二节点 且第一节点默认高亮同时添加滚动条并设置样式
xiaoming4965的博客
02-01 3057
el-tree默认展开第二节点 且第一节点默认高亮同时添加滚动条并设置样式
关于element tree树默认展开几级
qq_45970524的博客
12-18 3727
前言： 今天不加班了，写点代码吧… 突然心血来潮想把遇见的这个小功能点加到博客里 这里主要用到了 node-key=“id” 跟 :default-expanded-keys=“defaultShowNodes” 这两个属性 第一个是根据绑定的字段来保证每一项数据的唯一性 第二个是默认展开的数组id 我这里是自己写了个递归来实现具体代码 废话不多说 开始展示代码 <el-tree ref="tree" :data="studentTree" :highligh
动态设置elementui 的el-tree的层级只显示2个层级
南北极之间
01-22 8050
需要设置 node-key和default-expanded-keys 官方链接： https://element.eleme.cn/#/zh-CN/component/tree 关键代码： <div class="head-container"> <el-tree :data="deptOptions" :props="defaultProps" :expand-on
el-tree 懒加载的情况下，默认展开2级
weixin_44812936的博客
05-30 8109
el-tree 懒加载的情况下，默认展开2级
el-table@expand-change=“rowClick“点击一级专业显示二级专业，点击下一个箭头，上一个关闭
萌萌的博客
01-16 548
el-table @expand-change="rowClick"点击一级专业显示二级专业，默认展开点击的二级专业，其他关闭实现效果 <el-table :data="majorList" style="width:100%;margin-top:1% ;" @expand-change="rowClick" ref="refTable"> <el-table-column type='expand'> <template
vue+element-Tree控件 父子传值递归展示1级（父级）和3级标签
m0_55969466的博客
06-21 1193
需求仅展示最外层父级标签和三级标签 ；二级标签不展示element tree：Element - The world's most popular Vue UI framework（1）默认展示（2）点击选择标签（3）点击确定按钮展示选中标签（1级、3级） （4）点击删除对应标签（1） 父组件 templete（2）父组件 引入子组件（3）js-data中的参数（4）js-methods三、子组件代码（1）templete（2）js（3）css.........
关于element tree树形结构设置默认展开第一级，第二级，第三级，以此类推
热门推荐
WHB20126的博客
04-02 1万+
官方default-expand-all是否默认展开所有节点，这个在这里已经不够用了。 第一步：设置node-key属性，每个树节点用来作为唯一标识的属性，整棵树应该是唯一的。例如：node-key="id" 第二步：设置default-expanded-keys属性，默认展开的节点的 key 的数组。 实例如下： （1）页面元素代码 <el-tree:data="deptOptions":props="defaultProps"node-key="id":expand-on-cl...
ElementUI Tree 树形控件的使用并给节点添加图标
11-21
 因为项目需要用Vue做一个管理系统，其中有一个公司部门的管理页面有用到ElementUI 的树形控件，但是结构中没有使用chexkBox选项框，针对这个功能碰到的一些问题做一下总结 一，数据渲染 1）在标签中绑定data属性 ...
elementUI Tree 树形控件的官方使用文档
10-17
ElementUI Tree 树形控件是前端开发中常用的一种组件，它用于展示具有层次结构的数据，通常被用来表示目录、组织架构或者有嵌套关系的信息。这个组件允许用户展开或折叠节点，以便更好地管理和查看数据。在本文中，...
vue3 element-plus 树组件 el-tree 展开到默认层级递归、双击树重命名
qq_43901960的博客
07-27 2434
vue3 element-plus 树组件 el-tree 展开到默认层级递归、双击树重命名
el-table 指定层级展开
最新发布
carbonzhao的专栏
09-20 1269
核心代码注意：这三个属性，一定要注意使用。id即接口给你返回的每个节点的id，具体看你后端接口返回的命名。isExpandAll在data中默认为false意为不要全部默认展开，即全部自动收起。再来看看被展开节点的设置：将要展开节点的id放入expandRowKeysList数组中。如果你默认展开第二级，则修改以上代码，将二级节点的id压入数组中即可。先来看看页面默认全部展开时页面的显示效果：所有节点被展开，一眼望去杂乱无章！那么如何实现只展开指定的节点呢？最终效果如下：一眼看去很舒爽。
vue2+element-ui el-tree树形控件封装
misschengispink的博客
10-20 2464
根据官网配置项封装了下el-tree 方便维护和复用~
element 树形2级表格，设置默认选中
qq_26841153的博客
09-16 947
element 树形2级表格，设置默认选中
element组件table实现点击展开子表格
weixin_50520054的博客
10-21 5909
最近在做一个项目是有关年级以及班级列表管理的，如： element组件默认是点击前面的那个箭头就可以展开当前行下面包含的内容了，但现在我想点击添加班级下面的班级列表也可以展开现在应该怎么做呢？实现效果如下： 以下是代码区 1.首先我们要给表格的每一行添加一个key值 <!--页面代码start--> <el-table :row-key="getKey" :expand-row-keys="expandKeys">
vue3 element plus el-tree树形控件懒加载默认展开
weixin_50587417的博客
03-14 2487
vue3 element plus el-tree树形控件懒加载默认展开 element
el-table默认展开行
柒个橙子的博客
10-26 2785
<template> <el-table ref="table" :data="tableData" :row-key="getRowKey" :expand-row-keys="expandRowKeys" @expand-change="handleExpandChange"> <el-table-column type="expand" fixed> <template slot-scope="scope"> <..
vue el-tree：默认展开第几级节点
weixin_33859844的博客
08-07 1万+
需求描述： 　　Tree 树形结构，默认展开第二级菜单。 　　 查 element 文档： 　　 解决方法： 　　设置:default-expanded-keys 的值为idArr 数组， <el-tree :data="aProductTree" node-key="productCode" :default-expanded-keys="idAr...
element el-tree 懒加载 默认展开第二层
qq_45068078的博客
04-26 6662
思路 在el-tree 执行load时，保存节点。调用loadData方法 代码 <el-tree node-key="id" lazy :load="loadNode" /> data() { return { chooseNode: {},//当前选中节点 } }, mounted() { this.$nextTick(() => { //调用loadData方法展开第二层 let nodedata = t
自定义elementui树形控件每一级节点文字颜色
06-07
您可以在自定义的 element-ui 树形控件组件中，通过设置每一级节点的样式来实现不同级别节点文字颜色的设置。具体的做法是在组件的样式中通过设置 `::v-deep` 伪类选择器来覆盖 element-ui 默认的样式。例如，下面的代码可以将第一级节点的文字颜色设置为红色，第二级节点的文字颜色设置为蓝色： ```css /* 自定义 element-ui 树形控件样式 */ .el-tree-node.level-1 { color: red; } .el-tree-node.level-2 { color: blue; } ``` 其中，`.el-tree-node` 是 element-ui 树形控件中每个节点的样式类，`.level-1` 和 `.level-2` 分别表示第一级和第二级节点的样式类。通过设置这些样式类的样式，就可以实现不同级别节点文字颜色的设置。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值