element-ui tree组件点击父节点默认选中第一个子节点。

已于 2022-09-27 17:29:09 修改
阅读量8.4k 收藏 5
点赞数 5
文章标签： vue.js elementui
于 2021-12-16 14:30:55 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_52137696/article/details/121973993
版权

目的：为了实现章节目录结构，章节内容以小节划分，只有小节里才可以新建内容，章只负责展开不能被选中。

js实现方法：

点击父级目录时设置当前选中第一个子集目录。

还可以设置当目录获取焦点的时候，选中的时候，hover的时候不同的样式。

那么初始页面默认展开第一级父级目录并选择第一个子目录实现方法：

 

设置其默认展开的目录key，并将数据的第一级的以一个子集设置成当前目录即可。

预览：

代意如
关注
  • 5
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
element-ui树节点默认选中
SuperArc1999的博客
03-11 2568
<el-tree empty-text="暂无组织" :data="dptLists" #列表数据 node-key="dptId" #为查询出来的列表中的属性字段 :current-node-key="currentLivingId" :default-expand-all="true" :expand-on-click-node="false" ...
vue+ elementv UI 使用Tree组件实现定位展开某一个父节点并选中该父节点下的某一个子节点
Alisane的博客
12-21 2138
elementv UI 中的Tree组件实现定位展开某一个父节点并选中该父节点下的某一个子节点（或者选中该父节本身）如图所示： <template> <div> <el-tree :data="deviceList" ref="tree" :props="defaultProps" node-key="id" :default-expanded-k..
前端el-tree默认选中第一个节点
fsjciel的博客
03-11 1126
this.$refs.testTree.setCurrentKey(response.data[0].id) // 选中第一个节点样式回显。this.handleNodeClick(this.treeData[0]) // 选中第一个节点后调用的方法。default-expand-all // 默认展开树。treeData:[] // 定义treeData，类型为数组。// 节点被点击时的回调方法（可做进一步查询操作等）// 获取treeData的方法。
element-tree树结构-默认选中第一个节点高亮-根据id选中节点高亮
路虽远行则将至，事虽难做则必成。
09-09 7931
tree树结构是在开发中经常使用的组件，比如区域树，楼层树，组织架构树，等等包含节点关系实际开发可能需要我们一进到页面选中树形结构第一个节点，并且调用数据，来达到用户体验在用户选择之后，通过本地存储的方式把楼层id存起来，刷新之后获取楼层id，调用数据或者为了用体验我们需要在选中同时高亮，在状态保持之后，把绑定楼层id节点高亮提示用户万变不离其宗，基于文档介绍和HTML结构代码。我们可以通过2种办法实现。
el tree 默认展开第一级节点
最新发布
weixin_55042716的博客
06-05 856
【代码】el tree 默认展开第一级节点。
el-tree页面加载后默认选中节点
weixin_51722520的博客
01-29 716
vue默认选中树
elementUI实现el-tree默认选中第一个：
SunPeng的博客
01-03 5586
elementUI实现el-tree默认选中第一个：
vue+elementUI实现el-tree默认选中第一层级的第一个节点
热门推荐
weixin_48286936的博客
11-16 1万+
项目场景： 查询成绩时，按照左侧年级和班级树来查询学生成绩 默认选中第一层级下的第一个节点 并给出选中样式 问题描述： 此图为el-tree官方文档给出的数据，数据为对应的id、label、children 该项目数据为接口返回，并且返回的数据格式并不是像el-tree提供的那么规整，需要自己组装 组装数据： 规整数据，统一保持相同的名称，使用replace替换成label和id id为整个字段唯一的，不能把年级的id也进行替换，因为会重复 如果不需要默认展开第一个层级下的第一个节点，id可不
el-tree 默认选中第一个数据
CMDN123456的博客
08-24 1518
el-tree 默认选中第一个数据
el-tree 默认选中第一个节点
藕粉桂花糖糖糕的博客
01-25 2156
el-tree 默认选中第一个节点
Element-ui tree组件自定义节点使用方法代码详解
10-18
Tree组件是Element UI中的一个重要组件，它以树形结构展示信息，常用于文件目录展示、组织架构展示等场景。在实际使用中，我们可能需要自定义节点的内容和样式，以满足特定的业务需求。 在提供的内容中，通过实例...
Element-ui el-tree新增和删除节点后如何刷新tree的实例
10-14
在Element-ui中，`el-tree`是一个非常常用的组件，用于展示层级关系的数据。在实际开发过程中，我们常常需要动态地新增或删除树形结构中的节点，并确保这些操作后树能够正确地更新显示。本文将详细讲解如何在Element...
element-ui tree树形控件:default-checked-keys 设置空数组 默认还是选中状态问题
01-20
在Element UI库中，Tree组件是一个非常常用的控件，它用于构建层次结构的数据展示，比如在权限管理或者文件目录等场景。在这个问题中，开发者遇到了一个关于`default-checked-keys`属性的问题，即当尝试将该属性设置...
element-ui tree结构实现增删改自定义功能代码
10-14
// 默认选中第一个 }, methods: { // 编辑 nodeEdit(ev, store, data) { data.isEdit = true; this.$nextTick(() => { const $input = ev.target.parentNode.parentNode.querySelector("input") || ev....
elementui tree组件动态获取数据和默认选中，实现默认选中第一级的第一个（单选）
qq_45030898的博客
04-22 4545
elementui tree组件动态获取数据和默认选中，实现默认选中第一级的第一个（单选）1.实现效果2.实现代码 1.实现效果 实现效果如图 2.实现代码 <el-tree v-if="isShowTree" node-key="deptCode" :expand-on-click-node="false" default-expand-all ref="tr
85.解决el-tree默认选中第一个节点且选中时更改背景色字体等以及设置鼠标悬浮时只有叶子节点为小手状态
银河与猫的博客
05-12 3069
然后在添加对应的样式（这里要注意在点击父节点时取消其子节点样式），记得给el-tree元素外层元素添加class名区分一下（我这里给它的上层元素添加的class名为：organization_configuration）的元素，改为数组，遍历该数组，然后在其内再遍历tree数据的数组，因为默认都是小手状态，所以判断type为1或2时，对该元素style样式做处理。这里后端接口返回的数据叶子节点的type为0或3，type为1和2的都是父节点，所以先获取所有class名为。
vue el-tree 默认选中第一条
kan_Feng的博客
11-04 2137
vue el-tree 默认选中第一条
element el-tree 默认选中节点
weixin_44679789的博客
08-12 2757
element el-tree 默认选中节点
element-ui tree修改点击父节点的背景色
05-13
要修改 Element UI 的 Tree 组件中点击父节点的背景色，可以通过以下方式进行： 1. 在 CSS 中为选中的节点添加样式。 ``` .el-tree-node.is-selected:not(.is-current):not(.is-expanded):not([aria-level="1"]) { background-color: #f5f7fa; } ``` 2. 在 CSS 中为展开的节点添加样式。 ``` .el-tree-node.is-expanded:not(.is-current):not([aria-level="1"]) { background-color: #f5f7fa; } ``` 3. 在 CSS 中为当前节点添加样式。 ``` .el-tree-node.is-current:not([aria-level="1"]) { background-color: #f5f7fa; } ``` 将以上样式添加到你的 CSS 文件中，然后在 Tree 组件中添加 class 名称即可。 ``` <template> <el-tree class="tree"></el-tree> </template> <style> .tree .el-tree-node.is-selected:not(.is-current):not(.is-expanded):not([aria-level="1"]) { background-color: #f5f7fa; } .tree .el-tree-node.is-expanded:not(.is-current):not([aria-level="1"]) { background-color: #f5f7fa; } .tree .el-tree-node.is-current:not([aria-level="1"]) { background-color: #f5f7fa; } </style> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值