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

最新推荐文章于 2022-07-17 23:20:54 发布
最新推荐文章于 2022-07-17 23:20:54 发布
阅读量3.1k 收藏 1
点赞数 4
分类专栏： 前端框架 文章标签： html web vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/JiangHu_Java/article/details/108364422
版权

前言

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

解决办法

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

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

在这里插入图片描述

Jiang呀
关注
  • 4
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
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
Vue ElementUI el-tree 动态设置节点是否显示
前端技术
02-24 1972
Vue ElementUI el-tree 动态设置节点是否显示
vue+ elelment-ui +tree树形组件背景颜色的修改，点击节点背景颜色修改设置为其他颜色，或是样式不生效的原因
王阿储的博客
03-17 2万+
本文仅作为我在初次学习vue+element-ui路上碰到的一些问题以及解决的办法的记录，不论问题的难易程度，于我而言是一种成长过程的记录，望大佬勿喷。 vue+ elelment-ui +tree树形组件背景颜色的修改，直接在Element官网拷贝过来的树形组件背景颜色是白色，每次点击以及鼠标悬浮上后会有一个偏灰的背景颜色。如图 但是如果我需要用树形组件放在一个黑色背景或其他背景颜色时，树形自...
ElementUI Tree组件遇到的问题及高亮搜索
菜同学的博客
09-03 1186
3. 遇到的问题 4.扩充(多个关键词高亮搜索) 新需求： 输入框中的多个关键词高亮搜索 如何理解 $1 参考文章地址
el-tree的不同节点显示不同颜色
weixin_38007986的博客
07-29 1183
用renderContent(h, { node, data, store }){}方法 给span标签添加样式
Vue ElementUI el-tree 背景透明且重置hover等默认样式
前端技术
04-28 2764
需求：el-tree 背景透明，使用父元素的颜色。 一、原始样式 二、修改后 注意：这里是全局，<style scoped>无效。如果只对某个tree改样式，可加前缀。下述的示例使用预处理 stylus。 // 这里没有 scoped <style lang="stylus"> .el-tree{ color: #FFFFFF;// 白色字体 background: rgba(0,0,0,0);// 整体背景透明 .el-checkbox__
element ui实现动态侧边菜单栏以及页面布局
zhanglinsen123的博客
07-17 1万+
element ui实现动态侧边菜单栏以及页面布局
Vue 修改el-table 背景颜色，鼠标移入时颜色变换
java
11-29 2万+
Vue 修改el-table 背景颜色，鼠标移入时颜色变换一、表格样式展示二、el-table背景颜色三、hover样式修改 该文章在搭建完Vue-cli环境同时实现el-table的展示。 如果想了解构建表格请访问我之前的文章：点击跳转 一、表格样式展示 表格代html码如下 <div class="tableMain"> <el-table :data="ta.........
Vue组织架构树图组件vue-org-tree的使用
热门推荐
芸灵fly的博客
01-17 4万+
说明 最近需要作出一个组织架构图来可视化展示一下，最后找到vue-org-tree这个组件，觉得效果还不错~，可选节点颜色、横向/纵向展开、打开/收起，在这记录一下使用方法，效果图如下： 快速开始 安装 npm install --save-dev less less-loader npm install --save-dev vue2-org-tree （可能还需要安装其他组件，...
vue组织结构插件 vue2-org-tree 样式
weixin_45738653的博客
07-03 7985
近期在实现组织结构树这一功能，用echarts的树形图表实现之后，觉得样式不能调整为自己想要的，且偏差较大。于是，在了解了相关的插件后，使用vue2-org-tree 这一插件实现这一功能，对其中的坑有点体会。 1.安装 vue2-org-tree npm ivue2-org-tree --save-dev 2.安装 loader npm install -D less-loader less *：官方文档引入样式的时候是导入的 less 文件 3.项目中导入vu...
vue+elementui实现多层树形菜单
10-16
一个完整的树形菜单demo，下载即可运行，包含node_module包，使用vue+el-menu完成多层树形菜单。内含模拟数据格式。
基于SpringBoot+Vue+ElementUI 前后端分离的人力资源管理系统（源码+数据库脚本）.zip
最新发布
07-08
本项目是一套基于SpringBoot+Vue前后端分离的人力资源管理系统，主要针对计算机相关专业的正在做毕业设计的学生和需要项目实战的Java学习者。也可作为课程设计、期末大作业。包含：项目源码、数据库脚本等，该项目...
基于vue + elementUI的管理系统模板
02-22
基于vue + elementUI的管理系统模板
基于SpringBoot+Vue+ElementUI的人事管理系统
01-12
基于SpringBoot+MyBatis+Vue+Element的人事管理系统. 包含源代码、数据库DDL SQL、初始化数据SQL等，可以基于此做二次开发，快速搭建自己的业务系统。
thinkphp6_vue+elementUi后台基础管理框架.zip
11-14
基础路由前后一起存储，用户登录后从后端获取菜单权限，再由前段生产路由。这样前端不用编写路由。缺点是添加菜单需要注意使用公用的index和base。基础的用户管理，角色管理，账号管理，登录，退出，个人信息。 运行...
layUI树形菜单后端动态加载数据和遇到的bug
JiangHu_Java的博客
07-01 3356
layUI树形菜单各种形态前言基本功能演示实现步骤动态加载数据 前言 这篇博客主要讲述了layUI树形菜单的各种形态以及配合MySQL数据库中的数据动态加载节点！ 基本功能演示 这上面是一个比较全面的树形菜单，下面是有关它的详述图： 实现步骤 第一步肯定是要导入layUI的包啦！ 没有的小伙伴们火速下载熬： https://www.layui.com/ 下载完是这样的： 啊有一个注意事项：我在观看layUI的示例时，我只在其中看到了两个导入的路径： <link rel="stylesheet"
SPA项目与后台交互实现的登录
JiangHu_Java的博客
08-26 2481
SPA项目与后台交互实现的登录前言实现过程 前言 上篇博客讲了如何搭建一个SPA项目，这篇博客讲述SPA项目与后台交互实现的登录。 实现过程 首先我们需要新建一个SPA项目，并配置好相关依赖。 安装elementUI npm install element-ui -S 用于后台交互(axios/qs/vue-axios) npm install axios -S npm install qs -S npm install vue-axios -S 安装elementUI完后需要引入main.js
SPA项目实现页面跳转&mock.js拦截请求&vue组件之间传递数据
JiangHu_Java的博客
08-30 1097
前言 上篇博客讲述了一遍SPA项目的登录，这篇博客讲一下SPA项目的跳转以及左侧菜单。 页面跳转 我就做一个注册界面8！首先需要一个注册界面： 我是copy我的登录界面再做修改的 代码： <template> <div class="login-wrap"> <el-form class="login-container"> <h1 class="title">用户注册</h1> <el-form-item label="
vue+ElementUI中菜单高亮问题
06-07
在Vue+ElementUI中，可以通过给菜单添加 `index` 属性来控制菜单的高亮显示。具体做法如下： 1. 在菜单组件中添加 `index` 属性，例如： ```html $route.path" class="el-menu-vertical-demo" router> ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值