【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;

  }
}
相关推荐
喵个咪18 小时前
一套Schema,生成全部代码|Kratos高效开发新范式
前端·后端·架构
Dewyze同学18 小时前
我用 Cursor 三天从零到可上线:uni-app + Fastify 全栈小程序复盘
前端
qq_3813385018 小时前
前端虚拟列表与无限滚动性能优化实战:从万级数据到丝滑体验
前端·javascript·html·优化
hexu_blog18 小时前
前端vue后端springboot如何实现图片格式转换
前端·javascript·vue.js
代码煮茶18 小时前
Vue3 项目规范实战 | ESLint+Prettier+Git Hooks 搭建前端代码规范体系
前端·javascript·vue.js
米丘18 小时前
新一代代码格式化工具 Oxfmt/Oxlint
前端·rust·前端工程化
韭菜炒大葱18 小时前
讲讲 浏览器的缓存机制
前端·面试·浏览器
AI砖家18 小时前
DeepSeek TUI 保姆级安装配置全指南 -Windows||macOS双平台全覆盖
服务器·前端·人工智能·windows·macos·ai编程·策略模式
Apache01218 小时前
chrome调试打开,让AI来操作浏览器
前端·chrome
lbaihao19 小时前
LLVM Cpu0 调用规则解析
开发语言·前端·python·llvm