通过css修改el-tree高亮颜色

最新推荐文章于 2024-06-27 17:52:11 发布

fh100421

最新推荐文章于 2024-06-27 17:52:11 发布

阅读量218

点赞数 1

文章标签： css vue.js 前端

本文链接：https://blog.csdn.net/weixin_50704569/article/details/129047759

版权

这段CSS代码是用于在.v-deep作用域内，针对.el-tree组件的当前选中节点(.el-tree-node.is-current)进行样式修改，将节点内容的颜色设置为白色(#ffffff)，并将背景色改为深蓝色(#5ea6f4)。

摘要由CSDN通过智能技术生成

::v-deep.el-tree--highlight-current

.el-tree-node.is-current

> .el-tree-node__content {

color: #ffffff;

background: #5ea6f4 !important;

}

</style>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

fh100421

关注关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
通过css修改el-tree高亮颜色

修改el-tree下拉列表高亮颜色
复制链接

扫一扫

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

qq_37635012的博客

02-13

7039

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

el-tree-selected-tree

11-15

`el-tree`通过`data`属性接收一个包含树结构的数据数组，每个对象包含`label`（节点文本）、`children`（子节点数组）和其他自定义属性。我们可以利用`props`属性来指定各个属性的映射，例如`label`对应节点的显示...

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

layui的树形组件eleTree.js和css文件（免费）

11-12

layui的一个树形组件所需要的文件，可能没有，所以就在这里放一份。具体使用地方可以看我博客

el-tree设置选中高亮/焦点高亮、选中的节点加深背景，更改字体颜色等

最新发布

ge_lee的博客

06-27

572

修改el-tree左侧图标，文字颜色以及选中背景颜色。

el-tree组件选中高亮变色

陈熙之的博客

02-07

865

el-tree组件选中高亮变色

小吴学前端--Element-UI tree 组件选中节点高亮（持续高亮）

wuwuwwu66的博客

02-21

3177

最近开发的时候遇到的一个需求：1.加深选中单据颜色框；2.在不切换tree组件时，选中的一直保持高亮；由于对该组件不是很熟悉，记下笔记，用来巩固学习。

可编辑el-tree样式功能修改：修改icon、可编辑input、修改下拉展开icon位置

02-28

import { ElTree } from 'element-ui'; export default { components: { ElTree }, data() { return { treeData: [], // 树形数据 defaultProps: { // 默认属性设置 label: 'name', // 数据中的键值对应节点...

CSS-Tree:纯 CSS 树图

07-04

1. **选择器与伪类**: CSS-Tree利用了CSS的选择器，如`:hover`伪类来实现鼠标悬停时的高亮效果。当鼠标悬停在一个节点上时，通过CSS的后代选择器或子选择器，可以轻松地选中并改变该节点的所有子节点的样式，从而...

elementui更改el-dialog关闭按钮的图标d的示例代码

10-15

以下是一个示例代码，展示了如何通过CSS来更改`el-dialog`的关闭按钮图标： ```html <el-dialog title="对话框" :visible.sync="dialogVisible" @close="关闭事件()" @opened="打开事件()" class="自定义样式"> ...

vue修改Element的el-table样式的4种方法

10-14

除了上述方法，还可以通过CSS类和深度选择器（如`.el-table__body tr:nth-child(n)`)来全局修改Element UI的el-table样式。但这种方法可能会受到Element UI内部样式的影响，可能需要更高的优先级或者使用`!important...

Layui的eleTree树式选择器，分单选和多选，带搜索功能

06-09

Layui的eleTree树式选择器，分单选和多选，带搜索功能。

el-tree 添加选中时的颜色(vue)

孙海东的博客

02-26

4005

el-tree 添加选中时的颜色(vue) <el-tree style="margin-top:15px;" :data="templates" :props="templateDataProps" @current-change="handleNodeClick" :highlight-current='true' default-expand-all :expand-on-click-node="false"> </el-tree>

el-tree点击高亮字体修改

xiaoming4965的博客

03-17

297

html中添加highlight-current 属性。

el-tree选中节点后固定颜色

yy_alone的博客

12-08

1394

el-tree可以自定义选中节点颜色，但是点击其他位置后选中的节点背景颜色会消失，观感很不好

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

weixin_48975022的博客

05-05

2079

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

(css)el-tree树节点过长省略显示

nyf_unknow的博客

02-27

862

【代码】(css)el-tree树节点过长省略显示。

踩坑记13 css 子元素充满父元素 | el-tree 折叠与展开、高度、滚动条

Alloom的博客

08-10

3937

2021.8.10 坑42（css、子元素充满父元素）：目标是通过css使html子元素充满父元素。其中，height: 100%需要父元素有高度设置才起效。如下设置即可： .box { width: 100%; height: 100%; } 坑43（el-tree、高度充满父元素）：目标是使el-tree元素的高度充满父元素。普通使用，单个el-tree组件：首先尝试设置height: 100%，无效果，el-tree的高度依然为内容高度。之后外包一层div设置其高...

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

2201_75604580的博客

04-14

528

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

el-tree-v2高亮自定义

06-14

`el-tree-v2`是Element Plus库中的一个组件，它是一个基于虚拟滚动的树形控件，常用于数据结构的层次展示。高亮自定义功能允许你在树节点上进行特定状态下的样式定制，以便于用户快速识别关键信息或当前选中的节点。在`el-tree-v2`中，你可以通过以下方式来自定义高亮： 1. **事件监听**：当节点被点击或处于其他高亮状态时（比如鼠标悬停），可以通过`@node-click`、`@node-contextmenu`等事件监听器来获取节点，然后对它们的样式进行修改。 ```javascript <template> <el-tree :data="treeData" @node-click="handleNodeClick" ref="tree" ></el-tree> </template> <script> export default { methods: { handleNodeClick(node) { this.$refs.tree.setCurrentKey(node.key); // 设置当前选中的节点 // 根据需要自定义样式，如使用v-bind:class 或者直接操作node.style node.class = 'custom-highlight'; // 假设你有一个名为'custom-highlight'的CSS类 }, }, }; </script> ``` 2. **节点属性**：在数据节点对象中，你可以添加额外的属性来标记状态，例如`highlight`属性，然后在渲染节点时根据这个属性决定是否应用高亮样式。 ```javascript data() { return { treeData: [ { key: '1', label: '父节点', highlight: false, children: ... }, { key: '2', label: '子节点', highlight: true, ... }, ], }; }, ``` 3. **CSS自定义**：创建一个CSS类来描述你想要的高亮样式，如背景色、边框变化等，然后在上述方法中应用这个类。 ```css .custom-highlight { background-color: yellow; /* 示例中的黄色背景 */ border: 1px solid red; /* 示例中的红色边框 */ } ```