vue+ElementUI的树形菜单背景颜色修改

最新推荐文章于 2025-01-07 14:49:20 发布
原创 最新推荐文章于 2025-01-07 14:49:20 发布 · 3.4k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#html #web #vue

本文解决了一个在使用Element-UI框架时遇到的问题，即如何将默认白色背景的树形菜单更改为透明背景。通过直接修改index.css文件中的el-tree样式实现。

前言

最近开发项目遇到一个问题，就是原型图中树形菜单背景颜色是透明的但是默认的树形菜单背景颜色是白色的，用style更改不了背景颜色，最后找到了解决办法。

解决办法

根据项目路径F:\project\crm\node_modules\element-ui\lib\theme-chalk找到index.css
在这里插入图片描述
用记事本打开，点击编辑里的查找，找到el-tree的样式，将其更改为none即变成透明：

在这里插入图片描述
效果图：

在这里插入图片描述

4万字长文让人看懂ElementUI面试题及参考答案
大模型大数据攻城狮的专栏
05-31 680
在ElementUI的中实现自定义验证规则主要通过rules属性中的validator方法来完成。rulevalue和callback。rule是当前的验证规则对象，value是需要验证的输入值，callback是一个必须被调用的函数，用于返回验证结果。定义规则：在的rules属性中定义验证规则，为需要自定义验证的字段添加一个规则对象。使用validator：在规则对象中使用validator方法定义自定义验证逻辑。调用callback：在validator。
前端必备：ElementUI 全面入门指南
最新发布
AI架构全栈开发实战笔记
05-21 1282
ElementUI是一套基于Vue.js 2.0的桌面端组件库，由饿了么前端团队开发并开源。本文旨在为前端开发者提供一份全面的ElementUI学习指南，涵盖从基础安装到高级定制的所有内容。本文将从ElementUI的基本概念开始，逐步深入到具体组件的使用、主题定制和项目实战，最后讨论实际应用场景和未来发展趋势。Vue.js：渐进式JavaScript框架，用于构建用户界面组件：可复用的Vue实例，具有预定义选项响应式设计：界面能够适应不同屏幕尺寸的设计方法Vue 3.0适配。
vue+ elelment-ui +tree树形组件背景颜色的修改，点击节点背景颜色修改设置为其他颜色，或是样式不生效的原因
热门推荐
王阿储的博客
03-17 2万+
本文仅作为我在初次学习vue+element-ui路上碰到的一些问题以及解决的办法的记录，不论问题的难易程度，于我而言是一种成长过程的记录，望大佬勿喷。 vue+ elelment-ui +tree树形组件背景颜色的修改，直接在Element官网拷贝过来的树形组件背景颜色是白色，每次点击以及鼠标悬浮上后会有一个偏灰的背景颜色。如图 但是如果我需要用树形组件放在一个黑色背景或其他背景颜色时，树形自...
Vue ElementUI el-tree 背景透明且重置hover等默认样式
前端技术
04-28 3423
需求：el-tree 背景透明，使用父元素的颜色。 一、原始样式 二、修改后 注意：这里是全局，<style scoped>无效。如果只对某个tree改样式，可加前缀。下述的示例使用预处理 stylus。 // 这里没有 scoped <style lang="stylus"> .el-tree{ color: #FFFFFF;// 白色字体 background: rgba(0,0,0,0);// 整体背景透明 .el-checkbox__
el-tree单独设置父节点icon，清除el-tree的节点选中背景色
qq_52140056的博客
05-22 3042
效果图： HTML代码： data代码： 这里treeData是其他组件传过来的 watch监听：对数据进行监听，使数据状态可更新 methods方法定义，这里只做了样式处理： css代码： 完整代码： <template> <div class="tree_box"> <el-card> <div> <span class=...
el-tree 取消鼠标hover，点选时的背景色
qq_41959922的博客
10-15 643
然后在index.css中搜索，替换为想要的颜色即可。
Element-UI表格自定义背景颜色
qq_47229902的博客
03-29 5334
自定义elementUI表格背景颜色，更改鼠标经过背景颜色
ElementUI 自定义 Tree 树形控件背景；Tree 树形菜单组件
UserGuan的博客
11-02 1386
ElementUI 自定义 Tree 树形控件背景；Tree 树形菜单组件
elementui树形组件自定义高亮颜色
qq_41713136的博客
04-10 1171
1、需求描述：点击按钮切换树形的章节，同时高亮。1）style样式添加。
前端实战：Vue3+ElementPlus+ECharts实现后台管理系统
qq_22910257的博客
01-07 2158
本次课程带领大家使用Vue3结合ElementPlus，ECharts工具实现后台管理系统页面，包含登录功能，主页布局和导航条功能，客户和保单管理功能，分页展示功能，表单添加功能，报表生成功能等。使用axios调用远程接口，使用Apifox模拟远程接口，使用vuex存储登录信息。
vue-tree-color:漂亮的树看看那个
05-31
vue-tree-color 源码分支在 本项目是 针对 vue-org-tree 做得一个 demo ,并且根据公司项目进行修改 上传了 npm 包 下面我们开始讲解 浏览器兼容 Edge Firefox Chrome Safari Edge last 2 versions last 2 versions last 2 versions 前言 最近公司项目（Vue + Element ）需求有用到 tree ，所以呢我去网上找了很多插件，都不是很符合我的要求。最后在GitHub上面找到了一款插件是 iview 的组织结构树 vue-org-tree ,但是由于文档不是特别易懂，自己踩了很多坑。不过定制性特别高，基本上会用到的方法都有了。所以今天来给大家讲解下。 自己也根据业务需求修改了部分内容，下面我也会介绍到我修改的内容，重新修改了包上传到了npm 安装 NPM # use npm
el-tree 背景色
MR.杜的博客
04-19 551
【代码】el-tree 背景色。
vue+elementui项目折叠菜单再展开有白框问题
Arlisol的博客
01-31 6785
博主在使用vue+elementui实战过程中制作了一个折叠菜单功能，可以把菜单压缩宽度。但是遇到了一个问题，压缩后再展开的菜单显示有问题，会出现一条白框，如图所示： 这是正常的菜单： 这是折叠后的菜单： 这是再展开的菜单： 可见，再展开的菜单宽度变成了折叠菜单的宽度。原因是在布局上没有控制好菜单的宽度，博主找到了两种解决方案分享给大家： 将v-show属性换成v-if属性 &amp;lt;el...
element ui 中el-tree修改背景色及选中的颜色鼠标悬停颜色
weixin_72127453的博客
05-27 2001
修改el-tree颜色
element的导航栏修改其选中时颜色的问题
Beam
06-06 2万+
修改element导航栏选中时的背景色，通过浏览器选中导航栏查看可知修改样式.el-menu-item.is-active即可。 于是…… .el-menu-item.is-active { background: #247bb4 !important; } 以为完事了吗？ 不不不 正常使用时效果确实达到了 但是长时间闲置页面，再回头看这个页面时会出现 哪里来的灰色？？？ 鼠标点击界面任...
解决elementui 侧边次级菜单去除背景颜色问题
jichunhui1992的博客
01-07 1431
.el-submenu_title:hover{ background-color:transparent; } 使用unset会有ie的兼容性问题哦！
elementUI中的侧边栏去除白色边框
weixin_45974259的博客
04-08 5102
我们在使用elementUI组件库的el-menu组件时，会发现右侧有白色边框 通过以下样式即可去除白色边框 .el-menu{ border:0!important; }
elementPlus的tree组件点击后有白色背景
brilliantSt的博客
09-30 933
在使用elementPlus的tree组件时，需要对它进行样式的重写，下面是相关代码。// 整个tree组件的背景色。
解决ElementPlus中的Menu菜单背景设为透明后导航栏文字下方出现一条细白线
qq_61887118的博客
08-27 1904
在将menu菜单背景设置为透明后，出现一条细白线，不仅响应观感，还很容易激怒强迫症患者。找到元素.el-menu–horizontal.el-menu。由于元素非常小，很难定位，并且元素只有某事件才会变化。将元素border-botom设置为0即可。使用浏览器自带样式工具，模拟鼠标事件。
vue+elementUI 树形结构表格
03-29
嗯，用户想了解Vue和ElementUI结合实现树形结构表格。首先，我需要回忆一下ElementUI的组件库，记得ElementUI确实有一个el-table组件，支持树形结构，但可能需要一些配置。 首先，用户可能已经知道基本的表格用法，...
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值