vue+ elelment-ui +tree树形组件背景颜色的修改，点击节点背景颜色修改设置为其他颜色，或是样式不生效的原因

最新推荐文章于 2024-05-27 14:23:55 发布
原创 最新推荐文章于 2024-05-27 14:23:55 发布 · 2.4w 阅读 · 37 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue #element-ui #tree树组件 #更改tree样式

本文仅作为我在初次学习vue+element-ui路上碰到的一些问题以及解决的办法的记录，不论问题的难易程度，于我而言是一种成长过程的记录，望大佬勿喷。

vue+ elelment-ui +tree树形组件背景颜色的修改，直接在Element官网拷贝过来的树形组件背景颜色是白色，每次点击以及鼠标悬浮上后会有一个偏灰的背景颜色。如图
整

但是如果我需要用树形组件放在一个黑色背景或其他背景颜色时，树形自身的背景颜色就会显得很突兀所以需要修改，而在官方文档中，配置方法函数等都没有关于修改样式的，所以我们如果要修改的话只能这个只能自己对样式进行干涉，自己去覆盖样式，然后我们通过元素审查来查看原代码，找到相对于的类名进行覆盖，大概过程就是这样，不说别的了，上图。

在这里插入图片描述

在这里插入图片描述

找到我们需要的东西后，直接在代码里对这些类名进行新的样式覆盖就好了。我自己写了一个小demo来做进行测试。以下是成品。

在这里插入图片描述

以下为样式代码。

在这里插入图片描述

最低0.47元/天 解锁文章

200万优质内容无限畅学
vue2+elementUI：实现tree横向滚动问题，el-tree怎么设置树节点内容溢出的滚动条？Tree树组件设置横向和纵向滚动条多种解决方案与示例代码（解决横向滚动条不显示、设置无效没用问题）
高级前端工程师
06-22 2297
element-UI el-tree横向滚动条，el-tree 横向滚动条，elementui树组件Tree横向滚动条不出来，vue项目中el-tree ：横向和纵向滚动条设置，添加横向滚动条，elementUI - tree横向滚动问题，vue项目中el-tree 支持横向和纵向滚动条设置，element 树组件 tree 横向纵向滚动条，element-ui中使用el-tree横向滚动条不显示，不产生横向滚动条，css设置无效，滚动条不出来怎么办，解决Element-ui-Tree组件无法出现横向滚动条
Vue中使用antd-table组件时，树形表格展开配置不生效-defaultExpandedRowKeys-默认展开配置不生效
最新发布
JackieDYH的博客
03-31 386
defaultExpandAllRows这个属性仅仅是用来设置默认值的，只在第一次渲染的时候起作用，后续再去改变，无法实现响应式。
解决Vue 3在使用element-plus时重写样式不起作用的问题
一起学习
08-27 3200
本文主要介绍Vue 3在使用element-plus时重写样式不起作用的几种情况。
vue--el-tree树图点击节点上的某一个按钮，固定并且修改节点的背景颜色
wlijun_0808的博客
06-16 1365
vue--el-tree树图点击节点上的某一个按钮，固定并且修改节点的背景颜色
vue+ElementUI的树形菜单背景颜色修改
JiangHu_Java的博客
09-02 3402
前言 最近开发项目遇到一个问题，就是原型图中树形菜单背景颜色是透明的但是默认的树形菜单背景颜色是白色的，用style更改不了背景颜色，最后找到了解决办法。 解决办法 根据路径F:\project\crm\node_modules\element-ui\lib\theme-chalk找到index.css 用记事本打开，点击编辑里的查找，找到el-tree的样式，将其更改为none即变成透明： 效果图： ...
Vue中解决 el-select 选中颜色不生效的方法
大剑师兰特的GIS世界
06-10 2319
第007个在vue和element UI联合技术栈的操控下，本专栏提供行之有效的源代码示例和信息点介绍，做到灵活运用。
element ui 中el-tree修改背景色及选中的颜色鼠标悬停颜色
weixin_72127453的博客
05-27 1851
修改el-tree颜色
element-ui tree树形控件:default-checked-keys 设置空数组 默认还是选中状态问题
01-20
在这个问题中，开发者遇到了一个关于`default-checked-keys`属性的问题，即当尝试将该属性设置为空数组时，树形控件的节点依然保持选中的状态，这与预期的行为不符。 `default-checked-keys`属性是Element UI Tree...
elementui树状菜单tree_Java + Element-UI 实现简单的树形菜单
weixin_39682301的博客
02-06 1837
一、简单入门级树形菜单实现(纯后台逻辑)1、简介(1)开发环境IDEA + JDK1.8 + mysql 1.8SpringBoot 2.2.6 + mybatis-plus此处仅后台开发(返回 json 数据)，前台页面展示后续会讲解。(2)数据表如下，仅供参考，可以添加 修改时间、创建时间、逻辑删除等字段。DROP DATABASE IF EXISTS test;CREATE DATABASE...
el-tree选中节点后固定颜色
yy_alone的博客
12-08 1930
el-tree可以自定义选中节点颜色，但是点击其他位置后选中的节点背景颜色会消失，观感很不好
ElementUI：tree组件背景色、鼠标hover悬浮背景色、选中背景色修改
m0_60667010的博客
04-11 940
技术学到手后，就要开始准备面试了，找工作的时候一定要好好准备简历，毕竟简历是找工作的敲门砖，还有就是要多做面试题，复习巩固。一个人可以走的很快，但一群人才能走的更远。不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎扫码加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！**[外链图片转存中…(img-m8Hn7ZrA-1712826488670)]
elementui 修改组件样式无效问题
qq_36539696的博客
12-29 1970
我这里是遇到了vue中使用element的tree组件，发现鼠标点击和悬浮在tree上时，tree的背景变成白色了 一开始直接用css对象重新改变样式，发现无效，即使是用!important也无效，先贴代码 .box_Video_list { height: 1041px; .el-tree { background: none; color: rgba(255, 255, 255, 0.8); font-size: 14px; font-
vue elementUI 覆盖el-tree的样式,修改鼠标点击时的颜色以及节点失去焦点时的背景色(亲测有效)
寒夜二十五
07-15 6917
首先来看下效果图: 当然颜色可以自定义,下面放下代码: <style> .el-tree-node:focus > .el-tree-node__content { background-color: #66b1ff87 !important; } .el-tree-node__content:hover { background-color: #66b1ff87; } .el-tree--highlight-current .el-tree-.
点击el-tree小三角后去除点击后的高亮背景样式，el-tree样式修改
wwf1225的博客
12-06 1505
element-loading-text="加载中..."// el-tree 点击三角去除默认高亮样式（这一句代码）下面是设置el-tree样式的代码。
Vue项目里设置el-tree默认选中的背景色和字体色以及鼠标悬停的背景色
qq_37635012的博客
02-13 7883
【代码】Vue项目里设置el-tree默认选中的背景色和字体色。
Elementui中el-tree点击关闭选中颜色问题
qq_44316317的博客
12-20 2142
elementui中el-tree实现选中高亮显示关闭重新打开选中不销毁效果在父组件中显示子个数 一.Element-UI tree 组件 点击后高亮显示的样式修改(背景色)树，设置check-change时，点击行选中，点击三角符号可以展开，但是颜色不受控制 <el-tree :data="treedata" accordion node-key="id" ref="tree" high
miniui中selectTree树形选择框的样式调整
热门推荐
mengo的博客
12-17 1万+
大家好，今天在项目中遇到了一个问题，项目中有一系列的选择框，有的要求是联动效果，还有的要求是树形结构，我负责开发树形结构，而且数据是通过uid、puid的方式生成层级关系。 在网上查阅了一些资料后，我选择了miniui的selectTree去写这个选着框，做出了树形结构后在功能上基本满足了需求，但是样式上却和其他选择框差距很大，那么树形结构的样式怎么调整呢，
给antd中table表格奇偶行设置不同样式（背景颜色交替）
Afterwade的博客
12-29 6610
今天在写大屏的时候碰到一个需求，需要将table表格展示的数据每一行背景颜色交替，翻阅资料后，完成了这个需求。 如下图： table组件中有个rowClassName属性，让我们可以通过给每一行添加不同的类名然后设置不同行的样式 jsx代码： import React, { Component } from 'react'; import {Layout,Select,Table} from 'antd' import './index.less' const { Option } = Select;
85.解决el-tree默认选中第一个节点且选中时更改背景色字体等以及设置鼠标悬浮时只有叶子节点为小手状态
银河与猫的博客
05-12 3490
然后在添加对应的样式（这里要注意在点击父节点时取消其子节点样式），记得给el-tree元素外层元素添加class名区分一下（我这里给它的上层元素添加的class名为：organization_configuration）的元素，改为数组，遍历该数组，然后在其内再遍历tree数据的数组，因为默认都是小手状态，所以判断type为1或2时，对该元素style样式做处理。这里后端接口返回的数据叶子节点的type为0或3，type为1和2的都是父节点，所以先获取所有class名为。
element树形悬浮时修改背景颜色
02-28
### 实现 Element UI 树形组件悬浮时修改背景颜色 为了实现在鼠标悬停于树形组件项时改变其背景颜色的效果，可以通过自定义 CSS 类并应用到 `el-tree` 组件中的节点上来完成这一需求[^1]。 #### 自定义样式覆盖默认样式 通过编写特定的选择器来匹配 `.el-tree-node__content:hover` 可以达到目的。下面是一个具体的例子： ```css /* 定义当鼠标悬停在树节点上的时候 */ .el-tree-node__content:hover { background-color: #f0f9ff; } ``` 这段代码会使得每当用户的光标移动至任意一个树结构内的项目之上时，该项目的底色将会变为浅蓝色(`#f0f9ff`)，从而提供视觉反馈给用户表明当前处于选中状态下的元素[^2]。 如果希望进一步定制不同层次级别的节点有不同的表现形式，则可以在原有基础上增加更多样式的调整；也可以利用 scoped 属性确保这些样式仅应用于指定范围之内而不影响全局其他部分的设计一致性。 对于更复杂的交互效果或者想要针对某些特殊条件触发样式变化的情况，还可以考虑结合 JavaScript 或者 Vue 的事件监听机制来进行动态控制。 #### 结合Vue实例展示如何使用 假设有一个简单的 Vue 应用程序，在其中包含了 `<el-tree>` 组件用于显示数据列表。此时只需要按照上述方法添加相应的 CSS 即可生效。 ```html <template> <div id="app"> <!-- Tree component --> <el-tree :data="treeData"></el-tree> </div> </template> <script> export default { name: 'App', data() { return { treeData: [ // Your tree structure here... ] } }, }; </script> <style lang="scss" scoped> // Import the custom styles defined above. @import './path/to/custom-styles'; </style> ``` 以上就是关于如何在 Element UI 中实现树形控件上鼠标的悬停变色功能的方法介绍。
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值