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

已于 2023-02-14 09:54:28 修改
阅读量7.7k 收藏 8
点赞数 2
分类专栏： vue2实战记录 文章标签： vue.js javascript 前端
于 2023-02-13 17:18:17 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_37635012/article/details/129013144
版权
本文介绍了如何在Vue项目中修改el-tree组件的默认选中背景色和字体色，以及鼠标悬停时的背景色。通过设置`highlight-current`属性实现高亮效果，并提供CSS样式修改选中和悬停状态。同时，展示了如何利用`setCurrentKey`方法结合API请求设置默认选中项。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

el-tree默认选中的背景色是白色，有时候我们需求是一进入到页面就要发请求，并且设置默认选中的背景色改为蓝色，字体色为白色，然后选中的项也是背景色改为蓝色，字体色为白色，那这个时候我们可以给el-tree通过添加属性 highlight-current设为高亮，然后通过以下样式改变选中的样式：

   .el-tree--highlight-current
        .el-tree-node.is-current
        > .el-tree
了解本专栏 订阅专栏 解锁全文 超级会员免费看
vue+ elelment-ui +tree树形组件背景颜色的修改，点击节点背景颜色修改设置为其他颜色，或是样式不生效的原因
王阿储的博客
03-17 2万+
本文仅作为我在初次学习vue+element-ui路上碰到的一些问题以及解决的办法的记录，不论问题的难易程度，于我而言是一种成长过程的记录，望大佬勿喷。 vue+ elelment-ui +tree树形组件背景颜色的修改，直接在Element官网拷贝过来的树形组件背景颜色是白色，每次点击以及鼠标悬浮上后会有一个偏灰的背景颜色。如图 但是如果我需要用树形组件放在一个黑色背景或其他背景颜色时，树形自...
element ui 中el-tree修改背景色及选中的颜色鼠标悬停颜色
weixin_72127453的博客
05-27 1747
修改el-tree颜色
vue+element|el-tree树设置懒加载和设置默认勾选
肥晨开发的学习之路
03-06 2420
在实际开发中，很多数据过于庞大，需要分批请求，使用到懒加载。但是在tree的方法中，使用懒加载后无法直接使用default-checked-keys默认勾选。提供了强大的功能，能够实现树形数据的懒加载、节点默认勾选和动态展开等需求。是 Element UI 提供的树形组件，支持懒加载、节点勾选等功能。组件时，树形数据的懒加载和默认勾选功能是常见的需求。属性，可以设置默认勾选的节点。该属性接收一个数组，数组中的值为需要勾选的节点 ID。事件回调函数会返回当前勾选的节点数据和节点对象。方法动态加载节点数据。
el-tree 背景色
MR.杜的博客
04-19 490
【代码】el-tree 背景色。
修改el-tree左侧默认图标、文字颜色以及选中背景颜色
ge_lee的博客
06-27 1368
修改el-tree左侧图标，文字颜色以及选中背景颜色。
el-tree选中节点后固定颜色
yy_alone的博客
12-08 1896
el-tree可以自定义选中节点颜色，但是点击其他位置后选中的节点背景颜色会消失，观感很不好
el-tree 修改每个层级的背景色
CMDN123456的博客
10-10 1160
el-tree 修改每个层级的背景色
修改el-tree鼠标移入背景色
04-03
### 自定义鼠标悬停背景色 在 CSS 中，可以针对 `.el-tree-node__content:hover` 类名设置新的背景颜色。以下是一个完整的示例代码[^1]。 #### HTML 和 Vue 模板部分 ```html <!-- 使用 custom-tree 类来自...
el-tree 选中之后白色的
01-17
具体来说，通过覆盖默认样式来调整 `.el-tree-node.is-current > .el-tree-node__content` 的背景色。 对于现代版本的 Vue CLI 项目，推荐使用 `::v-deep` 或者 `<style scoped>` 结合 `/deep/` 使用的方式来进行...
<el-tree ref="tree" :data="BomTreeData" node-key="id" :props="{ children: 'children', label: 'name' }" :class="'custom-tree'"> </el-tree>如何把样式设置为<el-table>一样的样子详细代码
04-09
| 表头背景色和字体加粗 | 添加自定义表头行 | | 斑马纹交替行背景色 | 为树节点添加交替背景色 | | 行悬停高亮效果 | 添加 `:hover` 背景色 | | 固定列宽和对齐方式 | 通过 `flex` 布局模拟表格列宽 | --- ### 二...
el-tree美化
最新发布
04-28
添加背景色渐变效果： ```css .el-tree-node__content:hover { background: linear-gradient(90deg, #f5f7fa 0%, #e4e7ed 100%); } ``` 3. **节点图标替换** 在组件定义时使用`icon-class`属性： ```html ...
el-tree树形控件组件修改背景色和悬浮色
weixin_44413779的博客
10-05 1265
有两个是比较好修改的，就是背景色和悬浮颜色。但是还有一个就是在点击小三角再改变focus会触发一个新的类挂载，不太容易捕捉。
修改el-tree背景色，字体色，单行多行超出省略号
Zxf_xcn的博客
02-10 2353
// *设置树形最外层的背景颜色为none，字体颜色为白色*/ .eL-tree { background: none; color: #fff; } // *设置三角图标的颜色*/ .eL-tree-node__expand-icon { color: #fff; } // *设置节点鼠标悬浮三角图标鼠标悬浮的颜色*/ .el-tree-node__content:hover .el-tree-node__expand-icon { color: #000; } .el-tree-node
el-tree组件 选中高亮变色
陈熙之的博客
02-07 1018
el-tree组件 选中高亮变色
element plus 使用 el-tree 组件设置默认选中和获取所有选中节点id
qq_30193097的博客
01-11 1508
【代码】element plus 使用 el-tree 组件设置默认选中和获取所有选中节点id。
element-ui tree修改点击节点的背景色和鼠标经过节点的背景色
Bitter的博客
06-29 4377
先上效果图 修改悬浮背景色 修改点击背景色 tree的代码，一定要加上highlight-current node-key="id" style里千万不要加scoped，否则样式无效如果要是想改字体颜色等其他样式，直接在里面写即可
el-tree 修改选中状态背景色
qq_29384639的博客
01-07 7191
默认选中是白色，修改成其他颜色如下所示： .el-tree-node.is-current > .el-tree-node__content { background-color: red !important; }
element el-tree 树图颜色配置
guagxi的博客
06-28 2915
/* 设置树形最外层的背景颜色和字体颜色 */ .el-tree { color: #fff; background: transparent; } /* 设置三角形图标的颜色 */ .el-tree-node__expand-icon { color: #fff; } /* 设置节点鼠标悬浮三角图标鼠标悬浮的颜色 */ .el-tree-node__content:hover .el-tree-node__expand-icon { color: #000; } /* .el-tre.
element UI el-tree 自定义 （改变字体颜色）
web_hj的博客
04-23 8842
1. <el-tree :data="data" :props="defaultProps" node-key="id" :default-expanded-keys="defaultExpanded" :render-content="renderContent" ///////////注意这里 @node-click="handleNodeCli...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值