【vue elementUI】修改el-dropdown样式

实现效果如下:

代码如下:

                <el-dropdown trigger="click" @command="handleCommand" active-text-color="#606266">
                  <span class="product-card">{{
                    getCategoryName(categoryId)
                  }}</span>
                  <el-dropdown-menu slot="dropdown">
                    <template v-for="(item, index) in categories">
                      <el-dropdown-item
                        class="xlcdList"
                        :style="
                          item.id == categoryId
                            ? 'color: #606266; background-color: #ecf5ff;'
                            : ''
                        "
                        :key="index"
                        :command="item.id"
                        >{{ item.categoryName }}</el-dropdown-item
                      >
                    </template>
                  </el-dropdown-menu>
                </el-dropdown>
.el-dropdown-menu {
  background-color: #478068;
}


.xlcdList {
  background-color: #478068;
  color: white;
  &:hover {
    // background-color: #478068;
    color: #606266;

  }
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/467873.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

一文解决内网传外网sftp没跑满带宽问题

随着企业网络的日益复杂&#xff0c;内部网络与外部网络之间的文件传输需求不断增长。然而&#xff0c;标准的SFTP协议在跨网络传输时常常无法充分运用可用带宽&#xff0c;导致传输效率不尽人意。本文旨在探讨影响内网至外网SFTP传输效率的因素&#xff0c;并结合一种高效的解…

Uibot (RPA设计软件)财务会计Web应用自动化(批量开票机器人)

Uibot (RPA设计软件&#xff09;Mage AI智能识别&#xff08;发票识别&#xff09;———机器人的小项目友友们可以参考小北的课前材料五博客~ (本博客中会有部分课程ppt截屏,如有侵权请及请及时与小北我取得联系~&#xff09; 紧接着小北的前两篇博客&#xff0c;友友们我们…

Vue+SpringBoot打造数据可视化的智慧河南大屏

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块三、系统展示四、核心代码4.1 数据模块 A4.2 数据模块 B4.3 数据模块 C4.4 数据模块 D4.5 数据模块 E 五、免责说明 一、摘要 1.1 项目介绍 基于JAVAVueSpringBootMySQL的数据可视化的智慧河南大屏&#xff0c;包含了GDP、…

深入解析:在 Node.js 中删除文件的正确姿势

引言 在 Node.js 中处理文件尤其是移除文件&#xff0c;对于维护高效应用程序至关重要。储存和秩序当道的今天&#xff0c;删除不必要或冗余的文件能力显得尤为关键。本文深入探讨你会想要使用这个强大功能的时刻和原因&#xff0c;并通过各种案例展示了这个概念&#xff0c;同…

基于Matlab的视频人面检测识别,Matalb实现

博主简介&#xff1a; 专注、专一于Matlab图像处理学习、交流&#xff0c;matlab图像代码代做/项目合作可以联系&#xff08;QQ:3249726188&#xff09; 个人主页&#xff1a;Matlab_ImagePro-CSDN博客 原则&#xff1a;代码均由本人编写完成&#xff0c;非中介&#xff0c;提供…

HTML静态网页成品作业(HTML+CSS)——个人介绍网页(1个页面)

&#x1f389;不定期分享源码&#xff0c;关注不丢失哦 文章目录 一、作品介绍二、作品演示三、代码目录四、网站代码HTML部分代码 五、源码获取 一、作品介绍 &#x1f3f7;️本套采用HTMLCSS&#xff0c;未使用Javacsript代码&#xff0c;共有1个页面。 二、作品演示 三、代…

sqllab第四十七关通关笔记

知识点&#xff1a; 错误注入字符型注入order by 位置注入 报错注入时间盲注 通过测试发现是一个字符型注入 构造payload:sort2 报错了 构造payload:sort2 不提示报错了 说明这里存在字符型注入 尝试进行单引号绕过 构造payload:sort2and 11 …

解锁数据可视化新境界:山海鲸可视化免费编辑与组件探索

作为一名长期使用山海鲸可视化的资深用户&#xff0c;我在数据可视化看板的制作过程中&#xff0c;深刻感受到了这款软件带来的便捷与高效。今天&#xff0c;我想与大家分享一些我在使用山海鲸可视化制作数据可视化看板时的经验&#xff0c;给对这款产品同样感兴趣的朋友同行一…

Mammoth——从docx文档提取html

1. Mammoth——提取word文档 Github: GitHub - mwilliamson/mammoth.js: Convert Word documents (.docx files) to HTML NPM: mammoth - npm CDN: https://cdn.jsdelivr.net/npm/mammoth1.4.8/mammoth.browser.min.js * 优缺点&#xff1a; 缺点&#xff1a;只能转换.docx文…

docker小白第十三天-compose容器编排

docker-compose容器编排 Docker-Compose是Docker官方的开源项目&#xff0c;负责实现对Docker容器集群的快速编排。Compose是Docker公司推出的一个工具软件&#xff0c;可以管理多个Docker容器组成一个应用。你需要定义一个YAML格式的配置文件docker-compose.yml&#xff0c;写…

将main打包成jar;idea打包main为jar包运行

将main打包成jar&#xff1b;idea打包main为jar包运行 适用场景&#xff1a;可以封装一些小工具。 配置jar Maven中添加 <packaging>jar</packaging>将其打包为jar。 设置运行入口main 编译jar 看到jar输出 运行效果&#xff1a; 其中&#xff0c;三方依赖也被…

Linux docker3--数据卷-nginx配置示例

一、因为docker部署服务都是以最小的代价部署&#xff0c;所以通常在容器内部很多依赖和命令无法执行。进入容器修改配置的操作也比较麻烦。本例介绍的数据卷作用就是将容器内的配置和宿主机文件打通&#xff0c;之后修改宿主机的配置文件就相当于修改了docker进程的配置文件&a…

Linux docker2--镜像及容器操作-nginx部署示例

一、上一篇已经完成了docker的基础环境搭建&#xff0c;和docker的安装。不清楚的小伙伴可以自己找上一篇看一下。本例以部署nginx为例展示 二、镜像相关 1、切换docker的镜像源为阿里云 命令&#xff1a; sudo mkdir -p /etc/docker sudo tee /etc/docker/daemon.json <&l…

6-高维空间:机器如何面对越来越复杂的问题

声明 本文章基于哔哩哔哩付费课程《小白也能听懂的人工智能原理》。仅供学习记录、分享&#xff0c;严禁他用&#xff01;&#xff01;如有侵权&#xff0c;请联系删除 目录 一、知识引入 &#xff08;一&#xff09;二维输入数据 &#xff08;二&#xff09;数据特征维度 …

基于YOLOv8深度学习的玉米叶片病害智能诊断与防治系统【python源码+Pyqt5界面+数据集+训练代码】深度学习实战、目标分类

《博主简介》 小伙伴们好&#xff0c;我是阿旭。专注于人工智能、AIGC、python、计算机视觉相关分享研究。 ✌更多学习资源&#xff0c;可关注公-仲-hao:【阿旭算法与机器学习】&#xff0c;共同学习交流~ &#x1f44d;感谢小伙伴们点赞、关注&#xff01; 《------往期经典推…

自然语言处理里预训练模型——BERT

BERT&#xff0c;全称Bidirectional Encoder Representation from Transformers&#xff0c;是google在2018年提出的一个预训练语言模型&#xff0c;它的推出&#xff0c;一举刷新了当年多项NLP任务值的新高。前期我在零、自然语言处理开篇-CSDN博客 的符号向量化一文中简单介绍…

爬虫 Day2

resp.close()#关掉resp 一requests入门 &#xff08;一&#xff09; 用到的网页&#xff1a;豆瓣电影分类排行榜 - 喜剧片 import requestsurl "https://movie.douban.com/j/chart/top_list" #参数太长&#xff0c;重新封装参数 param {"type": "…

科技驱动未来:ChatGPT3.5、GPT4.0、DALL·E 3和Midjourney联手重构人工智能生态

MidTool &#xff08;kk.zlrxjh.top&#xff09;&#xff08;亦称迷图网或者是免费的ChatGPT中文版以及Midjourney的AI绘画聊天工具&#xff09;是一款综合了众多科技前沿的人工智能助手&#xff0c;其中就包括了ChatGPT3.5、GPT4.0、DALLE 3以及Midjourney等多种智能服务&…

Hive优化

工作中涉及到优化部分不多&#xff0c;下面的一些方案可能会缺少实际项目支撑&#xff0c;这里主要是为了完备一下知识体系。 参考的hive参数管理文档地址&#xff1a;https://cwiki.apache.org/confluence/display/Hive/ConfigurationProperties 对于Hive优化&#xff0c;可以…