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

  }
}
相关推荐
lyc2333333 分钟前
鸿蒙多子类型输入法:3步实现输入模式自由切换🔤
前端
Danta3 分钟前
从 0 开始学习 Three.js(2)😁
前端·javascript·three.js
凌辰揽月3 分钟前
Web后端基础(基础知识)
java·开发语言·前端·数据库·学习·算法
Dignity_呱4 分钟前
vue3对组件通信做了哪些升级?
前端·vue.js·面试
植物系青年7 分钟前
基于 Lowcode Engine 的低码平台“编码效率”提升实践
前端·低代码
就是我8 分钟前
开发“业务组件库”,该从哪里入手?
前端·javascript·面试
Mintopia10 分钟前
在数字画布上雕刻曲线:NURBS 的奇幻冒险之旅
前端·javascript·计算机图形学
Hacker_seagull14 分钟前
Chrome安装代理插件ZeroOmega(保姆级别)
前端·chrome
石小石Orz18 分钟前
因为没有使用路由懒加载,产生了一个难以寻找的bug
前端
Mintopia18 分钟前
Three.js 力导向图:让数据跳起优雅的华尔兹
前端·javascript·three.js