el-tree 高亮某些节点

最新推荐文章于 2024-08-12 15:10:04 发布

爱心觉罗晓宇

最新推荐文章于 2024-08-12 15:10:04 发布

阅读量259

点赞数

文章标签：前端 javascript 开发语言

本文链接：https://blog.youkuaiyun.com/qq_44716001/article/details/135001345

版权

:render-content="renderContent"

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

爱心觉罗晓宇

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

vue3中实现el-tree通过ctrl或shift批量选择节点并高亮展示

蜗牛~~

12-08

1667

按住ctrl键实现单个多选按住shift实现区间范围多选。2、通过循环节点数组来更新nodes节点中isCurrent属性，控制高亮。引入的hooks文件，index.ts。1、重点是要获取当前所选节点数组。

Vue项目里设置el-tree默认选中的背景色和字体色以及鼠标悬停的背景色

qq_37635012的博客

02-13

7776

【代码】Vue项目里设置el-tree默认选中的背景色和字体色。

参与评论您还未登录，请先登录后发表或查看评论

el-tree 实现节点高亮

weixin_28898107的博客

03-31

4122

方法中根据当前节点是否存在来更新当前高亮节点的唯一标识符。如果当前节点不存在，则将。中的某个节点时，该节点就会高亮显示。您可以根据需要调整节点的高亮样式，例如设置。数组，为每个节点生成一个。组件，并且根据当前节点的。在上面的代码中，我们使用。在上面的代码中，我们在。

el-tree 设置目录树中的某个节点为高亮状态

热门推荐

little_kid_pea的博客

09-18

1万+

reference:https://segmentfault.com/q/1010000011024043/a-1020000014176642 this.$refs.viewTree.setCurrentKey(node_id); //"viewTree"是你自己在树形控件上设置的 ref="viewTree" <el-tree ref="viewTree" ...

vue中 el-tree如何高亮显示某一节点

Jenny_ttw的博客

03-15

5199

项目中使用el-tree进行筛选表格，想要选中某节点时高亮显示，综合查的资料进行总结 1. :highlight-current="isShowGaoliang"为true或者false决定是否需要树高亮显示 <el-tree :expand-on-click-node="false" ref="myTree" node-key="id" @node-click="setIssue...

【el-tree查询并高亮】vue使用el-tree组件，搜索展开并选中对应节点，高亮搜索的关键字，过滤后高亮关键字，两种方法

seeeeeeeeeee的博客

07-22

4171

2，差的时候调用这个this.$refs.tree2.filter(this.title);里面的title就是你搜索的值。1，在tree标签上加上这句话:filter-node-method="filterNode"这个方法复制下面的，只需要把data.title修改成你字段的名字就行，比如你的字段叫name就是data.name。这里的逻辑就是通过递归循环把所有和关键字匹配的节点筛选出来。这个是用的官方文档的那个过滤方式，可以参考官方文档看一下。效果图这样的，会把所有的有这些关键字的节点都展开。

Element el-tree 树形的默认点击指定node并高亮

cc蒲公英的博客

07-26

596

Element el-tree 树形的默认点击指定node并高亮

【elementui】记录el-tree默认选中某节点并高亮显示

bbt953的博客

08-12

1516

记录el-tree默认选中某节点并高亮显示

elementUI中el-tree组件单选没有复选框时，选中、current-node-key高亮、刷新后保留展开状态功能的实现

weixin_41549971的博客

01-30

2409

elementUI中el-tree组件单选没有复选框时，选中、current-node-key高亮、刷新后保留展开状态功能的实现

2024年Web前端最全vue中watch与防抖动函数使用冲突问题解决，安卓前端开发

2301_82243710的博客

05-04

805

如果你打算靠自己摸索自学，那么你首先要了解学习前端的基本大纲，这是你将要学习的主要内容，理解以及掌握好这些内容，便可以找到一份初级的前端开发工作。你还需要有一套完整的前端学习教程，作为初学者最好的方式就是看视频教程学习，初学者容易理解接受。不要选择买书学习，这样的方式没有几个人能学会，基本都是看不下去书，也看不懂书。如果喜欢看书的学弟，可以买一些经典的书籍作为辅助即可，主要还是以看教程为主。每天抽出固定几个小时学习，做好长期学习的准备。

el-tree 默认选中并高亮

李木子的博客

05-15

1709

【代码】el-tree 默认选中并高亮。

element tree树选中节点并且节点高亮

做一个有知识的流氓

12-16

1191

只为记录 <el-tree :data="industryOptions" :props="defaultProps" @node-click="handleNodeClick" node-key="id" default-expand-all highlight-current ref="tree"> <script> handleNodeClick(data) { this.$nextTick(() => { // 节点的id 传进来 t

el-tree选中节点高亮显示

BBH2000的博客

07-19

563

el-tree选中节点高亮显示

element-tree树结构-默认选中第一个节点高亮-根据id选中节点高亮

路虽远行则将至，事虽难做则必成。

09-09

1万+

tree树结构是在开发中经常使用的组件，比如区域树，楼层树，组织架构树，等等包含节点关系实际开发可能需要我们一进到页面选中树形结构第一个节点，并且调用数据，来达到用户体验在用户选择之后，通过本地存储的方式把楼层id存起来，刷新之后获取楼层id，调用数据或者为了用体验我们需要在选中同时高亮，在状态保持之后，把绑定楼层id节点高亮提示用户万变不离其宗，基于文档介绍和HTML结构代码。我们可以通过2种办法实现。

自定义el-tree组件中点击某行数据时高亮效果

weixin_48975022的博客

05-05

2294

如下所示，这是elementUI中的tree组件，当点击某行数据的时候会有背景色，但是当鼠标点击别处时，便失去焦点，背景色随之消失了。而我想要的效果是，当点击某行数据，高亮该数据，且一直不消失，当点击另一行数据时，高亮效果切换到点击数据。

JavaScript中的对象，入职3个月的前端程序员面临转正，四轮面试后多久出结果

2201_75604580的博客

04-14

693

如果你已经下定决心要转行做编程行业，在最开始的时候就要对自己的学习有一个基本的规划，还要对这个行业的技术需求有一个基本的了解。有一个已就业为目的的学习目标，然后为之努力，坚持到底。如果你有幸看到这篇文章，希望对你有所帮助，祝你转行成功。网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。需要这份系统化的资料的朋友，可以添加V获取：vip1024c （备注前端）一个人可以走的很快，但一群人才能走的更远！

vue3 使用element-plus el-tree 树形控件设置默认节点高亮

weixin_55935744的博客

07-13

3125

【代码】vue3 使用element-plus el-tree 树形控件设置默认节点高亮。

el-tree点击节点高亮，再次点击取消高亮

ssssummer的博客

07-03

2983

【代码】el-tree点击节点高亮，再次点击取消高亮。

el-tree 限制子节点不高亮

最新发布

03-28

<think>好的，我现在需要解决用户提出的关于element-ui中el-tree子节点不被高亮的问题。首先，用户希望禁止子节点高亮，同时可能希望父节点在点击时保持高亮状态。我需要回顾相关的element-ui文档和用户提供的引用内容，找到对应的解决方法。根据引用[3]中的信息，el-tree组件使用highlight-current属性来启用高亮当前选中节点，而高亮的节点是通过current-node-key来设置的。用户提到子节点被高亮，这可能是因为点击子节点时，current-node-key被更新为子节点的key，导致高亮显示。因此，要禁止子节点高亮，可能需要阻止子节点被设置为当前节点。接下来，我需要考虑如何判断当前点击的节点是否为子节点。在el-tree的node-click事件处理函数中，可以访问到被点击节点的数据。如果节点没有子节点（即叶子节点），则视为子节点。此时，可以阻止设置current-node-key，或者手动将current-node-key重置为父节点的值。另外，引用[2]提到使用setCurrentKey方法来设置当前选中的节点。可能需要在点击子节点时，调用此方法将当前节点重新设置为父节点，从而避免子节点高亮。不过，需要注意的是，这样可能会影响其他交互逻辑，比如展开或折叠节点。还有一种方法是通过CSS样式覆盖，隐藏子节点的高亮效果。查找el-tree生成的高亮样式类名，然后针对子节点应用不同的样式，比如将背景色设置为透明或继承父级颜色。需要检查生成的HTML结构，确定子节点高亮时的类名，并在Vue组件中添加相应的样式。此外，根据引用[3]，设置node-key和current-node-key是必须的。用户可能需要确保父节点有唯一的标识，并且在点击子节点时，将current-node-key设置为父节点的标识。这可能需要修改handleNodeClick方法，判断点击的节点是否是子节点，如果是，则找到其父节点并更新current-node-key。还需要考虑用户是否希望点击子节点时没有任何高亮，或者仅父节点保持高亮。如果是后者，可能需要结合事件处理和样式覆盖两种方法。例如，在点击子节点时，阻止默认的高亮行为，并通过CSS隐藏子节点的高亮效果。总结可能的解决方案： 1. 在node-click事件中判断节点是否为子节点，如果是，则不更新current-node-key，或将其设置为父节点的key。 2. 使用CSS覆盖子节点的高亮样式。 3. 结合setCurrentKey方法在点击子节点时强制设置父节点为当前节点。接下来需要验证这些方法的可行性。例如，在handleNodeClick中检查node是否有children或者是否是叶子节点，然后决定是否更新currentNodeKey。同时，检查CSS类名，确认可以通过样式覆盖来隐藏高亮。可能遇到的挑战包括正确获取父节点的key，尤其是在多层嵌套的树结构中。此外，CSS样式可能需要使用!important来覆盖element-ui的默认样式。另外，如果用户需要保持父节点的高亮，则需要确保在点击子节点时，父节点的高亮状态不被清除。最终，可能需要提供一个代码示例，展示如何结合事件处理和样式覆盖来实现禁止子节点高亮的效果，并解释每一步的作用，确保用户能够理解并应用。</think>### 解决`el-tree`子节点禁止高亮的方案 #### 方法一：通过节点点击事件控制高亮逻辑在`node-click`事件中判断节点层级，如果是子节点（叶子节点）则不更新当前高亮节点： ```vue <template> <el-tree :data="treedata" node-key="id" :current-node-key="currentNodeKey" highlight-current @node-click="handleNodeClick" /> </template> <script> export default { data() { return { currentNodeKey: null }; }, methods: { handleNodeClick(nodeData, node) { // 仅当节点为非叶子节点时更新高亮 if (!node.isLeaf) { this.currentNodeKey = node.data.id; } else { // 强制清除高亮（需要手动调用API） this.$refs.tree.setCurrentKey(null); } } } }; </script> ``` #### 方法二：通过CSS样式覆盖使用样式穿透隐藏子节点高亮效果： ```css /* 隐藏所有节点的高亮背景 */ .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content { background-color: transparent !important; } /* 仅允许非叶子节点保留高亮 */ .el-tree-node:not(.is-leaf).is-current > .el-tree-node__content { background-color: #f5f7fa !important; } ``` #### 方法三：动态控制`highlight-current`属性通过条件判断禁用子节点的高亮交互： ```vue <el-tree :highlight-current="!isLeafNodeSelected" @node-click="checkNodeType" /> <script> export default { methods: { checkNodeType(nodeData, node) { this.isLeafNodeSelected = node.isLeaf; } } }; </script> ``` #### 原理解析 1. **高亮机制**：`highlight-current`属性激活时，点击节点会触发`current-node-key`更新[^2] 2. **节点类型判断**：通过`node.isLeaf`可区分父子节点[^3] 3. **样式优先级**：使用`!important`覆盖ElementUI默认样式[^1]