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

  }
}
相关推荐
JS菌12 分钟前
手写一个 AI Agent 全栈项目:从沙箱执行到子智能体的完整实现
前端·人工智能·后端
excel1 小时前
HLS TS 文件损坏的元凶:Git 提交与拉取
前端
Aphasia3112 小时前
https连接传输流程
前端·面试
徐小夕2 小时前
万字长文!千万级文档 RAG 知识库系统落地实践
前端·算法·github
梦梦代码精2 小时前
2026年PHP开源商城系统实测对比:架构、多商户、商用授权,谁才是真·省心?
vue.js·docker·架构·开源·代码规范
threelab2 小时前
Three.js 物理模拟着色器 | 三维可视化 / AI 提示词
开发语言·前端·javascript·人工智能·3d·着色器
kyriewen2 小时前
CSS Container Queries:彻底告别 @media 写到手软,附 5 个真实布局案例
前端·css·面试
小小小小宇4 小时前
OpenMemory MCP
前端
和平宇宙4 小时前
AI笔记005. hermes-DeepSeek V4 Pro, 128K上下文引发的探索
前端·人工智能·笔记