【vue elementUI】修改el-dropdown样式

实现效果如下:

代码如下:

javascript 复制代码
                <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>
css 复制代码
.el-dropdown-menu {
  background-color: #478068;
}


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

  }
}
相关推荐
BigTopOne4 小时前
【WebRtc】DTLS-SRTP 加密完整流程详解
前端
陈随易4 小时前
pm2 替代品,nodejs&bun 线上部署必备工具
前端·后端·程序员
单线程_014 小时前
从案例分析 Vue3 Tokenizer 源码一
前端·javascript·vue.js
BigTopOne4 小时前
【WebRtc】-ICE Candidate 与 STUN/TURN 原理详解
前端
l1258655 小时前
# LangGraph Memory机制深度解析:短期记忆与长期记忆的工程实践
前端·人工智能·python·langchain·bootstrap
码视野5 小时前
基于 Spring Boot + Vue3 的【大学英语四六级 (CET-4/6) 作文智能评分与句式润色系统】设计与实现(含PRD/三端高保真源码/大屏)
java·前端·人工智能·spring boot·后端·vue3
大模型码小白5 小时前
AI 对话流性能调优:万级消息的虚拟滚动落地
java·大数据·前端·javascript·人工智能·算法·机器学习
xm_xm_xm_16 小时前
react17版本以前类组件常用操作
前端·javascript·react.js
ly76897 小时前
Web 性能优化实战:从 Core Web Vitals 到工程化性能治理
前端·性能优化
冬奇Lab7 小时前
一天一个开源项目(第200篇):next-forge - 生产级 Next.js SaaS 启动模板
前端·前端框架·开源