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

Vue组织架构树图组件vue-org-tree的使用 说明 最近需要作出一个组织架构图来可视化展示一下,最后找到vue-org-tree这个组件,觉得效果还不错~,可选节点颜色、横向/纵向展开、打开/收起,在这记录一下使用方法,效果图如下: 快速开始 安装 npm install --save-dev less less-loader npm install --save-dev vue2-org-tree (可能还需要安装其他组件,... 阅读详情

前言

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

解决办法

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

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

在这里插入图片描述

若依(ruoyi)前端Vue3 Element Plus Vite版样式修改 【代码】若依(ruoyi)前端Vue3 Element Plus Vite版样式修改。 阅读详情

相关推荐

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

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

qq_37635012的博客 8134

Vue ElementUI el-tree 背景透明且重置hover等默认样式

需求:el-tree 背景透明,使用父元素的颜色。 一、原始样式 二、修改后 注意:这里是全局,<style scoped>无效。如果只对某个tree改样式,可加前缀。下述的示例使用预处理 stylus。 // 这里没有 scoped <style lang="stylus"> .el-tree{ color: #FFFFFF;// 白色字体 background: rgba(0,0,0,0);// 整体背景透明 .el-checkbox__

前端技术 3506

Vue2-org-tree插件 树形管理 详解

Vue2-org-tree是一个基于Vue.js的组织树组件,用于展示和管理组织结构。它提供了一个简单易用的界面,可以快速构建出具有层级关系的组织结构图。

weixin_71854821的博客 3599

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

本文仅作为我在初次学习vue+element-ui路上碰到的一些问题以及解决的办法的记录,不论问题的难易程度,于我而言是一种成长过程的记录,望大佬勿喷。 vue+ elelment-ui +tree树形组件背景颜色的修改,直接在Element官网拷贝过来的树形组件背景颜色是白色,每次点击以及鼠标悬浮上后会有一个偏灰的背景颜色。如图 但是如果我需要用树形组件放在一个黑色背景或其他背景颜色时,树形自...

王阿储的博客 2万+

vue-tree-color:漂亮的树看看那个

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

在Keil下完成一个汇编程序的编写

在学习STM32的路上开始是学的C语言尚未进行对汇编进行学习,因此抽出时间来学习一下在keil下的汇编语言。

Liu-FE的博客 1万+

Vue项目实战:用jsmind打造可编辑组织架构图的完整指南(附ElementUI集成技巧)

本文详细介绍了如何基于Vue技术栈,使用jsmind库打造可编辑的组织架构图,并与ElementUI深度整合,实现企业级需求。通过实战案例和代码示例,展示了从环境搭建、核心功能实现到高级功能扩展的全过程,帮助开发者提升开发效率和应用表现力。

weixin_29001327的博客 173

华为设备有关用户名密码的策略配置

命令用来开启对密码进行复杂度检查功能,设备默认已经是开启状态。1、密码长度大于等于12位,含数字大小写字母和特殊符号。2、设置密码更换周期为90天。取值范围8-16,默认长度为8位。登录失败后锁定时间大于15分钟。3、登录失败次数小于5次。4、登录超时30分钟以内。

简单的创作,希望可以帮助到跟我一样的学习者! 7840

前端----如何制作学生管理系统

技术主要是elementui以及vue2,并且学生管理系统是我们老师一步步带着我们画的,本节内容是课程的第二部分:画首页框架+学生管理界面。

lxt135744的博客 4067

电子技术——共栅和共源共栅放大器的高频响应

我们在之前学过无论是是CS放大器还是CE放大器,都可以看做是一个带通(IC低通)滤波器。在高频处的响应收到输入电容 $C_{in}$ 的限制(主要是米勒效应)。因此,若想扩大放大器的带宽,我们必须减小米勒效应,一种方案就是共栅放大器。

jiahonghao2002的博客 4183

基于ESP32的智能健康监测系统开发

本文介绍了如何基于ESP32开发智能健康监测系统,从硬件选型、系统架构到软件实现的每一个环节。通过ESP32的Wi-Fi功能、传感器模块和云平台的结合,我们实现了实时健康数据监测、远程查看、报警等功能。系统的低功耗特性使得其适用于长期健康监测,能够为用户提供更便捷的健康管理方案。随着技术的不断发展,未来智能健康监测系统将进一步发展。例如,增加更多的传感器,提升数据分析能力,甚至通过人工智能算法来预测用户的健康趋势,为用户提供个性化的健康建议。

2201_76125393的博客 1104

解决elementui 侧边次级菜单去除背景颜色问题

.el-submenu_title:hover{ background-color:transparent; } 使用unset会有ie的兼容性问题哦!

jichunhui1992的博客 1457

锂电池SOC估计 | 基于LSTM长短期记忆神经网络的锂电池SOC估计(附matlab完整代码)

锂电池SOC估计 | 基于LSTM长短期记忆神经网络的锂电池SOC估计(附matlab完整代码)

前程算法屋的博客 1022

vue组织结构插件 vue2-org-tree 样式

近期在实现组织结构树这一功能,用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...

weixin_45738653的博客 8927

RSA算法详解:万字文章详解RSA的加密与解密

为了彻彻底底的研究明白RSA算法,真的是。。煞(lei)费(si)苦(wo)心(le),首先我希望自己前前后后、彻彻底底的琢磨明白,其次我也希望我把他分享出来以后,大家都能读得懂,这篇文章真的是我迄今为止写的又臭又长的一篇文章了,但是我能保证的是,你读完了以后,绝对不会再问RSA是啥玩意儿了。。

布啦啦 7668

2026 AI Agent Harness Engineering 生态报告:开源工具链的现状与未来趋势

IEEE P2863-2025《通用人工智能自主代理技术架构与评估规范》于2025年11月正式发布,将AI Agent(通用人工智能自主代理)定义为:一种具备感知(Perception)、记忆(Memory)、推理(Reasoning)、规划(Planning)、行动(Action)五大核心能力闭环,能够在无显式指令覆盖全部环节的前提下,自主完成特定领域或开放领域复杂任务的智能实体。

AI 算法实战派 496

ElementUI之侧边导航栏样式修改

elementUi的导航栏样式更改

m0_56409834的博客 6001

3、神经网络在汽车中的应用

本文探讨了神经网络在现代汽车中的多种应用,包括防抱死制动系统(ABS)、燃油喷射系统、自动驾驶辅助系统以及发动机故障诊断。通过详细分析这些系统的具体工作流程和神经网络的集成方式,展示了神经网络如何提升车辆的安全性、效率与智能化水平。

moss5的博客 233

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

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

zslsh44的专栏 2357

温度PID控制PLC程序

温度PID稳定控制程序,适用于欧姆龙PLC,对其他PLC也具有很大参考价值

深度学习工具包 DeepLearningToolbox

深度学习工具包Deprecation notice.-----This toolbox is outdated and no longer maintained.There are much better tools available for deep learning than this toolbox, e.g. [Theano](http://deeplearning.net/software/theano/), [torch](http://torch.ch/) or [tensorflow](http://www.tensorflow.org/)I would suggest you use one of the tools mentioned above rather than use this toolbox.Best, Rasmus.DeepLearnToolbox================A Matlab toolbox for Deep Learning.Deep Learning is a new subfield of machine learning that focuses on learning deep hierarchical models of data.It is inspired by the human brain's apparent deep (layered, hierarchical) architecture.A good overview of the theory of Deep Learning theory is[Learning Deep Architectures for AI](http://www.iro.umontreal.ca/~bengioy/papers/ftml_book.pdf)For a more informal introduction, see the following videos by Geoffrey Hinton and Andrew Ng.* [The Next Generation of Neural Networks](http://www.youtube.com/watch?v=AyzOUbkUf3M) (Hinton, 2007)* [Recent Developments in Deep Learning](http://www.youtube.com/watch?v=VdIURAu1-aU) (Hinton, 2010)* [Unsupervised Feature Learning and Deep Learning](http://www.youtube.com/watch?v=ZmNOAtZIgIk) (Ng, 2011)If you use this toolbox in your research please cite [Prediction as a candidate for learning deep hierarchical models of data](http://www2.imm.dtu.dk/pubdb/views/publication_details.php?id=6284)```@MASTERSTHESIS\{IMM2012-06284, author = "R. B. Palm", title = "Prediction as a candidate for learning deep hierarchical models of data", year = "2012",}```Contact: rasmusbergpalm at gmail dot comDirectories included in the toolbox-----------------------------------`NN/` - A library for Feedforward Backpropagation Neural Networks`CNN/` - A library for Convolutional Neural Networks`DBN/` - A library for Deep Belief Networks`SAE/` - A library for Stacked Auto-Encoders`CAE/` - A library for Convolutional Auto-Encoders`util/` - Utility functions used by the libraries`data/` - Data used by the examples`tests/` - unit tests to verify toolbox is workingFor references on each library check REFS.mdSetup-----1. Download.2. addpath(genpath('DeepLearnToolbox'));Example: Deep Belief Network---------------------```matlabfunction test_example_DBNload mnist_uint8;train_x = double(train_x) / 255;test_x = double(test_x) / 255;train_y = double(train_y);test_y = double(test_y);%% ex1 train a 100 hidden unit RBM and visualize its weightsrand('state',0)dbn.sizes = [100];opts.numepochs = 1;opts.batchsize = 100;opts.momentum = 0;opts.alpha = 1;dbn = dbnsetup(dbn, train_x, opts);dbn = dbntrain(dbn, train_x, opts);figure; visualize(dbn.rbm{1}.W'); % Visualize the RBM weights%% ex2 train a 100-100 hidden unit DBN and use its weights to initialize a NNrand('state',0)%train dbndbn.sizes = [100 100];opts.numepochs = 1;opts.batchsize = 100;opts.momentum = 0;opts.alpha = 1;dbn = dbnsetup(dbn, train_x, opts);dbn = dbntrain(dbn, train_x, opts);%unfold dbn to nnnn = dbnunfoldtonn(dbn, 10);nn.activation_function = 'sigm';%train nnopts.numepochs = 1;opts.batchsize = 100;nn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.10, 'Too big error');```Example: Stacked Auto-Encoders---------------------```matlabfunction test_example_SAEload mnist_uint8;train_x = double(train_x)/255;test_x = double(test_x)/255;train_y = double(train_y);test_y = double(test_y);%% ex1 train a 100 hidden unit SDAE and use it to initialize a FFNN% Setup and train a stacked denoising autoencoder (SDAE)rand('state',0)sae = saesetup([784 100]);sae.ae{1}.activation_function = 'sigm';sae.ae{1}.learningRate = 1;sae.ae{1}.inputZeroMaskedFraction = 0.5;opts.numepochs = 1;opts.batchsize = 100;sae = saetrain(sae, train_x, opts);visualize(sae.ae{1}.W{1}(:,2:end)')% Use the SDAE to initialize a FFNNnn = nnsetup([784 100 10]);nn.activation_function = 'sigm';nn.learningRate = 1;nn.W{1} = sae.ae{1}.W{1};% Train the FFNNopts.numepochs = 1;opts.batchsize = 100;nn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.16, 'Too big error');```Example: Convolutional Neural Nets---------------------```matlabfunction test_example_CNNload mnist_uint8;train_x = double(reshape(train_x',28,28,60000))/255;test_x = double(reshape(test_x',28,28,10000))/255;train_y = double(train_y');test_y = double(test_y');%% ex1 Train a 6c-2s-12c-2s Convolutional neural network %will run 1 epoch in about 200 second and get around 11% error. %With 100 epochs you'll get around 1.2% errorrand('state',0)cnn.layers = { struct('type', 'i') %input layer struct('type', 'c', 'outputmaps', 6, 'kernelsize', 5) %convolution layer struct('type', 's', 'scale', 2) %sub sampling layer struct('type', 'c', 'outputmaps', 12, 'kernelsize', 5) %convolution layer struct('type', 's', 'scale', 2) %subsampling layer};cnn = cnnsetup(cnn, train_x, train_y);opts.alpha = 1;opts.batchsize = 50;opts.numepochs = 1;cnn = cnntrain(cnn, train_x, train_y, opts);[er, bad] = cnntest(cnn, test_x, test_y);%plot mean squared errorfigure; plot(cnn.rL);assert(er<0.12, 'Too big error');```Example: Neural Networks---------------------```matlabfunction test_example_NNload mnist_uint8;train_x = double(train_x) / 255;test_x = double(test_x) / 255;train_y = double(train_y);test_y = double(test_y);% normalize[train_x, mu, sigma] = zscore(train_x);test_x = normalize(test_x, mu, sigma);%% ex1 vanilla neural netrand('state',0)nn = nnsetup([784 100 10]);opts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samples[nn, L] = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.08, 'Too big error');%% ex2 neural net with L2 weight decayrand('state',0)nn = nnsetup([784 100 10]);nn.weightPenaltyL2 = 1e-4; % L2 weight decayopts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex3 neural net with dropoutrand('state',0)nn = nnsetup([784 100 10]);nn.dropoutFraction = 0.5; % Dropout fraction opts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex4 neural net with sigmoid activation functionrand('state',0)nn = nnsetup([784 100 10]);nn.activation_function = 'sigm'; % Sigmoid activation functionnn.learningRate = 1; % Sigm require a lower learning rateopts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex5 plotting functionalityrand('state',0)nn = nnsetup([784 20 10]);opts.numepochs = 5; % Number of full sweeps through datann.output = 'softmax'; % use softmax outputopts.batchsize = 1000; % Take a mean gradient step over this many samplesopts.plot = 1; % enable plottingnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex6 neural net with sigmoid activation and plotting of validation and training error% split training data into training and validation datavx = train_x(1:10000,:);tx = train_x(10001:end,:);vy = train_y(1:10000,:);ty = train_y(10001:end,:);rand('state',0)nn = nnsetup([784 20 10]); nn.output = 'softmax'; % use softmax outputopts.numepochs = 5; % Number of full sweeps through dataopts.batchsize = 1000; % Take a mean gradient step over this many samplesopts.plot = 1; % enable plottingnn = nntrain(nn, tx, ty, opts, vx, vy); % nntrain takes validation set as last two arguments (optionally)[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');```[![Bitdeli Badge](https://d2weczhvl823v0.cloudfront.net/rasmusbergpalm/deeplearntoolbox/trend.png)](https://bitdeli.com/free "Bitdeli Badge")

vue--el-tree树图点击节点上的某一个按钮,固定并且修改节点的背景颜色

vue--el-tree树图点击节点上的某一个按钮,固定并且修改节点的背景颜色

wlijun_0808的博客 1447

lwip-2.0.3

lwip是瑞典计算机科学院(SICS)的Adam Dunkels 开发的一个小型开源的TCP/IP协议栈。实现的重点是在保持TCP协议主要功能的基础上减少对RAM 的占用。

elementUI中的侧边栏去除白色边框

我们在使用elementUI组件库的el-menu组件时,会发现右侧有白色边框 通过以下样式即可去除白色边框 .el-menu{ border:0!important; }

weixin_45974259的博客 5209

VB摄像头监控

该VB模块可对摄像头捕获的画面进行录像等,可在创建的窗口进行控制

vue+elementui项目折叠菜单再展开有白框问题

博主在使用vue+elementui实战过程中制作了一个折叠菜单功能,可以把菜单压缩宽度。但是遇到了一个问题,压缩后再展开的菜单显示有问题,会出现一条白框,如图所示: 这是正常的菜单: 这是折叠后的菜单: 这是再展开的菜单: 可见,再展开的菜单宽度变成了折叠菜单的宽度。原因是在布局上没有控制好菜单的宽度,博主找到了两种解决方案分享给大家: 将v-show属性换成v-if属性 &amp;lt;el...

Arlisol的博客 6860

el-tree的不同节点显示不同颜色

用renderContent(h, { node, data, store }){}方法 给span标签添加样式

weixin_38007986的博客 1585

element ui实现动态侧边菜单栏以及页面布局

element ui实现动态侧边菜单栏以及页面布局

zhanglinsen123的博客 1万+

vue中el-tree设置节点选中后高亮、更改字体颜色、加深背景

vue中el-tree设置节点选中后高亮、更改字体颜色、加深背景

m0_60336681的博客 5589

Vue 修改el-table 背景颜色,鼠标移入时颜色变换

Vue 修改el-table 背景颜色,鼠标移入时颜色变换一、表格样式展示二、el-table背景颜色三、hover样式修改 该文章在搭建完Vue-cli环境同时实现el-table的展示。 如果想了解构建表格请访问我之前的文章:点击跳转 一、表格样式展示 表格代html码如下 <div class="tableMain"> <el-table :data="ta.........

java 2万+
上一篇: SPA项目实现页面跳转&mock.js拦截请求&vue组件之间传递数据
下一篇: 查看虚拟机ip地址出现的问题
Jiang呀
博客等级 码龄7年 16粉丝 59原创
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明:

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

余额充值