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

  }
}
相关推荐
麦麦大数据21 分钟前
J009 美食推荐可视化大数据系统vue+springboot
vue.js·spring boot·mysql·推荐算法·美食·可视化分析·沙箱支付
rfidunion31 分钟前
springboot+VUE+部署(1。新建项目)
java·vue.js·spring boot
wuk9981 小时前
梁非线性动力学方程MATLAB编程实现
前端·javascript·matlab
Irene19911 小时前
在 Vue 中使用 TypeScript 的几种方式
vue.js·typescript
XiaoYu20021 小时前
第11章 LangChain
前端·javascript·langchain
霉运全滚蛋好运围着转1 小时前
启动 Taro 4 项目报错:Error: The specified module could not be found.
前端
cxxcode1 小时前
前端模块化发展
前端
不务正业的前端学徒2 小时前
docker+nginx部署
前端
不务正业的前端学徒2 小时前
webpack/vite配置
前端
hhcccchh2 小时前
学习vue第八天 Vue3 模板语法和内置指令 - 简单入门
前端·vue.js·学习