tree组件背景色、鼠标hover悬浮背景色、选中背景色修改

最新推荐文章于 2024-06-27 17:52:11 发布
最新推荐文章于 2024-06-27 17:52:11 发布
阅读量1.8k 收藏 1
点赞数 2
分类专栏： vue element ui 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zslsh44/article/details/133760288
版权
文章详细介绍了如何使用VueElementUI库中的tree组件，分别针对背景色进行修改，包括默认背景、鼠标悬停时的高亮和选中状态的样式设置。
摘要由CSDN通过智能技术生成

1、tree组件背景色修改

::v-deep .el-tree{ background-color: #f5f5f5; }

2、tree组件鼠标hover悬浮背景色

::v-deep.el-tree-node__content{ &:hover{ background-color: red; } }

3、tree组件选中背景色修改

::v-deep.el-tree-node.is-current > .el-tree-node__content { background-color: black !important; }

醉书生ꦿ℘゜এ
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
鼠标经过切换背景的jquery导航条特效
06-06
"鼠标经过切换背景的jquery导航条特效"是一个增强用户体验的常见技术，它利用jQuery库来实现当用户鼠标悬停在导航条的各个链接上时，导航条背景或链接样式发生变化的动态效果。这一特效不仅增加了网站的视觉吸引力，...
elememt -tree组件实现树的懒加载、单选、互斥
小草莓的博客
11-09 1950
引入elememt 的 tree 组件，实现以下效果： 1、 树的懒加载 2、父子节点不相互关联 3、可勾选，而且必须是单选，即互斥 如图： HTML代码： <el-tree :props="props" :load="loadNode" lazy show-checkbox :check-strictly="true" node-key="id" ref="tree" ...
el-tree 修改选中状态背景色
qq_29384639的博客
01-07 7058
默认选中是白色，修改成其他颜色如下所示： .el-tree-node.is-current > .el-tree-node__content { background-color: red !important; }
修改el-tree左侧默认图标、文字颜色以及选中背景颜色
最新发布
ge_lee的博客
06-27 782
修改el-tree左侧图标，文字颜色以及选中背景颜色。
Elementui中el-tree点击关闭选中颜色问题
qq_44316317的博客
12-20 1969
elementui中el-tree实现选中高亮显示关闭重新打开选中不销毁效果在父组件中显示子个数 一.Element-UI tree 组件 点击后高亮显示的样式修改(背景色)树，设置check-change时，点击行选中，点击三角符号可以展开，但是颜色不受控制 <el-tree :data="treedata" accordion node-key="id" ref="tree" high
el-tree树形控件组件修改背景色和悬浮色
weixin_44413779的博客
10-05 921
有两个是比较好修改的，就是背景色和悬浮颜色。但是还有一个就是在点击小三角再改变focus会触发一个新的类挂载，不太容易捕捉。
element-ui tree修改点击节点的背景色和鼠标经过节点的背景色
Bitter的博客
06-29 3973
先上效果图 修改悬浮背景色 修改点击背景色 tree的代码，一定要加上highlight-current node-key="id" style里千万不要加scoped，否则样式无效如果要是想改字体颜色等其他样式，直接在里面写即可
element 树形控件el-tree 添加hover事件 完整代码
hsany330的专栏
04-27 3612
<el-tree class="filter-tree" :render-content="renderContent" :data="data" :props="defaultProps" default-expand-all :filter-node-method="filterNode" ref="tree"> </el-tree> export default { data() { return { dat...
el-tree选中节点后固定颜色
yy_alone的博客
12-08 1503
el-tree可以自定义选中节点颜色，但是点击其他位置后选中的节点背景颜色会消失，观感很不好
el-tree 背景色
MR.杜的博客
04-19 309
【代码】el-tree 背景色。
DevExpress设置FocusedNode背景色的方法
09-04
通过在事件处理器中检查`Node`属性与`FocusedNode`属性的匹配，我们可以判断当前正在绘制的节点是否是聚焦节点，并根据需要更改其背景色。 以下是一个示例代码，展示了如何设置FocusedNode的背景色： ```csharp ...
DevExpress设置TreeList图片节点背景色的方法
01-01
本文实例展示了DevExpress设置TreeList图片节点背景色的方法，在项目开发中有一定的应用价值，具体方法如下所示： 主要功能代码如下： /// /// 设置图片节点的背景色 /// 说明：在CustomDrawNodeImages事件中使用 ...
最简单目录树_改变treeview背景色,修改树控件加背景色.mdb
05-08
最简单实用的Access数据库目录树新建方法，图标控制及修改背景色，前景色等等，源码开放，注释，简单易懂，可移植
ElementUI：tree组件背景色、鼠标hover悬浮背景色、选中背景色修改
m0_60666452的博客
04-15 1298
不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！穿透css，改变el-tree-node.is-current > .el-tree-node__content的背景色。穿透css，改变el-tree-node__content的背景色。三、tree组件选中背景色修改。
Vue（26）el-tree树形控件实现鼠标hover显示与隐藏
weixin_43880991的博客
12-08 4730
实现效果与原理 我们希望实现鼠标移动至树型结构的结点上就显示按钮，移出就隐藏按钮实现原理：是通过@mouseenter 和 @mouseleave两个属性来控制鼠标hover的效果，再配合v-show来控制是否展示你需要的控件 具体代码 <el-tree :data="data" ref="tree" default-expand-all node-key="id" :...
Vue ElementUI el-tree 背景透明且重置hover等默认样式
前端技术
04-28 2976
需求：el-tree 背景透明，使用父元素的颜色。 一、原始样式 二、修改后 注意：这里是全局，<style scoped>无效。如果只对某个tree改样式，可加前缀。下述的示例使用预处理 stylus。 // 这里没有 scoped <style lang="stylus"> .el-tree{ color: #FFFFFF;// 白色字体 background: rgba(0,0,0,0);// 整体背景透明 .el-checkbox__
Vue项目里设置el-tree默认选中的背景色和字体色以及鼠标悬停的背景色
qq_37635012的博客
02-13 7109
【代码】Vue项目里设置el-tree默认选中的背景色和字体色。
python tkinter treeview 改变颜色_如何在Tkinter Treeview中更改选定单元格的前景色或背景色？...
weixin_39569076的博客
12-13 1636
importtkinterastkimporttkinter.ttkasttkimporttkinter.fontastkFontclassApp(tk.Frame):def__init__(self,parent,*args,**kwargs):ttk.Frame.__init__(self,parent,*args,**kwargs)#1. Create Treeview with bindi...
vue elementUI el-tree的样式,修改鼠标点击时点击后的颜色
m0_52775179的博客
05-09 2017
【代码】vue elementUI el-tree的样式,修改鼠标点击时点击后的颜色。
el-tree修改背景颜色
08-25
要修改el-tree组件的背景颜色，可以按照以下步骤进行操作： 1. 在CSS中找到.el-tree选择器，将background属性设置为你想要的背景颜色，比如none表示透明背景色，或者设置为其他颜色值。 2. 同样在CSS中找到.el-tree-node__expand-icon选择器，将color属性设置为你想要的颜色，用来改变树节点的三角图标颜色。 3. 如果想要在鼠标悬浮时改变节点的背景颜色和字体颜色，可以在CSS中添加下面的代码： ``` .el-tree-node__content:hover { background-color: #fff; // 悬浮时的背景颜色 color: #0ee; // 悬浮时的字体颜色 } ``` 4. 如果想要改变被点击节点的背景颜色和字体颜色，可以使用:focus伪类选择器，并设置background-color属性和color属性，比如： ``` .el-tree-node:focus > .el-tree-node__content { background-color: #fff; // 点击时的背景颜色 color: #000; // 点击时的字体颜色 } ``` 通过以上步骤，你可以修改el-tree组件的背景颜色。记得将代码放置在合适的位置，让其生效即可。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [el-tree设置选中高亮/焦点高亮、选中的节点加深背景，更改字体颜色等](https://blog.csdn.net/vvv3171071/article/details/124421368)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *3* [修改el-tree背景色，字体色，单行多行超出省略号](https://blog.csdn.net/Zxf_xcn/article/details/122859745)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值