vue中el-tree设置节点选中后高亮、更改字体颜色、加深背景

最新推荐文章于 2024-05-27 14:23:55 发布
最新推荐文章于 2024-05-27 14:23:55 发布
阅读量4.5k 收藏 4
点赞数 4
分类专栏： vue.js 文章标签： vue.js scss elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_60336681/article/details/126705871
版权

el-tree默认有较浅的背景色，这里业务需要，选中节点的字体高亮，更改颜色；

实现方法：

1、在el-tree组件标签加上属性highlight-current开启高亮
在这里插入图片描述
2、在css中修改高亮样式
在这里插入图片描述
注意：在这里scss不支持/deep/，所以使用了::v-deep

王新新2255
关注
  • 4
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue3中实现el-tree通过ctrl或shift批量选择节点并高亮展示
蜗牛~~
12-08 1276
按住ctrl键实现单个多选 按住shift实现区间范围多选。2、通过循环节点数组来更新nodes节点中isCurrent属性，控制高亮。引入的hooks文件，index.ts。1、重点是要获取当前所选节点数组。
vue el-tree 默认展开第一个节点的实现代码
10-15
主要介绍了vue el-tree 默认展开第一个节点的实现代码,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
JavaScript中的对象，入职3个月的前端程序员面临转正，四轮面试后多久出结果
2201_75604580的博客
04-14 506
如果你已经下定决心要转行做编程行业，在最开始的时候就要对自己的学习有一个基本的规划，还要对这个行业的技术需求有一个基本的了解。有一个已就业为目的的学习目标，然后为之努力，坚持到底。如果你有幸看到这篇文章，希望对你有所帮助，祝你转行成功。网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。需要这份系统化的资料的朋友，可以添加V获取：vip1024c （备注前端）一个人可以走的很快，但一群人才能走的更远！
element ui 中el-tree修改背景色及选中的颜色鼠标悬停颜色
最新发布
weixin_72127453的博客
05-27 540
修改el-tree颜色
el-tree组件 选中高亮变色
陈熙之的博客
02-07 856
el-tree组件 选中高亮变色
el-tree点击的节点文字设置颜色
weixin_47156901的博客
09-28 4030
vue 给el-tree点击的节点文字设置颜色解决步骤 el-tree 默认点击节点不会有什么样式，看起来很丑而且体验效果有点差 解决步骤 1.直接在.vue页面里面加一下样式 <style scope> .el-tree-node:focus>.el-tree-node__content{ background-color: #fff;//节点的背景颜色 color: #409eff;//节点的字体颜色 } </style> 注意：如果不起作用，可以试着把scope
elementui el-tree回显多个节点高亮
LJJONESEED的博客
09-22 1648
我想回显数据的时候，把选中的都高亮，所以需要高亮多个节点。elementui好像只能高亮一个。那么利用这个属性来设置。
vue中 el-tree如何高亮显示某一节点
Jenny_ttw的博客
03-15 5002
项目中使用el-tree进行筛选表格，想要选中某节点时高亮显示，综合查的资料进行总结 1. :highlight-current="isShowGaoliang"为true或者false决定是否需要树高亮显示 &lt;el-tree :expand-on-click-node="false" ref="myTree" node-key="id" @node-click="setIssue...
Element-ui el-tree新增和删除节点后如何刷新tree的实例
10-14
总结，要确保Element-ui的`el-tree`组件在新增或删除节点后正确刷新，关键是正确地修改数据源，并根据情况更新受影响的节点状态。同时，确保使用的是支持这一功能的最新Element-ui版本。在实际开发中，遇到问题时，...
el-select-tree:ElementUI的el-select与el-tree结合
05-07
ElementUI的el-select与el-tree结合在一起。 在线示例 用法 安装 npm install --save el-select-tree 需要element-ui 如果您的项目不使用element-ui，则需要引入一个单独的element-ui包，如下所示： import 'el-...
element el-tree组件的动态加载、新增、更新节点的实现
10-15
主要介绍了element el-tree组件的动态加载、新增、更新节点的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue-tree-color:漂亮的树看看那个
05-31
vue-tree-color 源码分支在 本项目是 针对 vue-org-tree 做得一个 demo ,并且根据公司项目进行修改 上传了 npm 包 下面我们开始讲解 浏览器兼容 Edge Firefox Chrome Safari Edge last 2 versions last 2 versions ...
vue element tree组件，根据不同的状态显示不同的字体颜色
qq_41437844的博客
08-25 3381
HTML <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick" :render-content="renderContent" :highlight-current="true" ></el-tree> data 把带status为1的颜色变为红色，其余的变为绿色 data: [ {
【el-tree查询并高亮】vue使用el-tree组件，搜索展开并选中对应节点，高亮搜索的关键字，过滤后高亮关键字，两种方法
seeeeeeeeeee的博客
07-22 3573
2，差的时候调用这个this.$refs.tree2.filter(this.title);里面的title就是你搜索的值。1，在tree标签上加上这句话:filter-node-method="filterNode"这个方法复制下面的，只需要把data.title修改成你字段的名字就行，比如你的字段叫name就是data.name。这里的逻辑就是通过递归循环把所有和关键字匹配的节点筛选出来。这个是用的官方文档的那个过滤方式，可以参考官方文档看一下。效果图这样的，会把所有的有这些关键字的节点都展开。
Vue3中JS控制Element-UI的el-tree点亮节点
weixin_53035812的博客
12-01 1050
父组件中的html： <template> //父组件 <div class="content"> //子组件 <member-tree ref="LeftMemberTree" /> </div> </template> 父组件中的调取接口获取的id赋值给子组件： LeftMemberTree.value.currentLayerDeptId = res..
vue3 element el-tree 默认选中某个节点高亮
a965412234的博客
07-28 2241
结合 current-node-key属性和setCurrentKey()方法及nexTick()同时使用 <el-tree :data="treeData" ref="tree" :default-expand-all="true" node-key="id" :expand-on-click-node="false" :current-node-key="defaultExpa
el-tree设置有子元素的节点不能选中高亮(vue2和vue3两种写法）
个人博客
12-15 3047
发现element-plus中更改。发现element-ui中更改。// 有子元素的节点，不能选中。值是有效的，通过这个属性实现。// 值更改，触发watch。// 点击树节点执行的代码。// 还原之前的高亮节点。
在vue中修改el-tree前面的图标以及高亮点击的节点
hsany330的专栏
04-15 1648
默认图标： 修改后的图标： 代码： /*树节点前面的图标修改*/ .el-tree .el-tree-node__expand-icon.expanded { -webkit-transform: rotate(0deg); transform: rotate(0deg); } .el-tree .el-icon-caret-right:before { background: url("../public/img/jia.png") no-repeat center cent...
vue+element-ui树形控件实现超简陋的高亮操作
weixin_73098736的博客
11-25 73
vue el-tree设置最后一个节点字体颜色为红色
05-30
可以通过以下方式设置 el-tree 的最后一个节点的字体颜色为红色： 1. 在 el-tree 组件上添加 ref 属性，例如 `ref="tree"`。 2. 在 mounted 钩子函数内获取到最后一个节点，然后设置其字体颜色为红色。代码如下： ```javascript mounted() { this.$nextTick(() => { const tree = this.$refs.tree.$el; const lastNode = tree.querySelectorAll('.el-tree-node:last-child .el-tree-node__label')[0]; lastNode.style.color = 'red'; }); } ``` 这里通过使用 querySelectorAll 方法获取到最后一个节点的 DOM 元素，然后设置其样式即可。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值