Element UI更改下拉菜单el-dropdown-menu样式

Element UI更改下拉菜单el–dropdown–menu样式

源代码：

<el-dropdown>
    <el-button type="default">
        全部版本
        <i class="el-icon-arrow-down el-icon--right"></i>
    </el-button>
    <el-dropdown-menu slot="dropdown" class="simu-dropdown"&gt;
        <el-dropdown-item&gt;黄金糕</el-dropdown-item&gt;
        <el-dropdown-item>狮子头</el-dropdown-item>
        <el-dropdown-item>螺蛳粉</el-dropdown-item>
        <el-dropdown-item>双皮奶</el-dropdown-item>
        <el-dropdown-item>蚵仔煎</el-dropdown-item>
    </el-dropdown-menu>
</el-dropdown>

这个样式更改还是有点费劲的，如图：

我想更改el-dropdown-item的样式，但是正常覆盖更改无法生效的，从渲染结构可以看出来这个下拉菜单的渲染列表是在文档最底部的。

解决办法

vue文件新建一个 style样式， 不加scoped；为保证这个组件的样式不会影响到其他页面组件样式，给el-dropdown-menu一个新的class, 然后设置即可

<style lang="less">
.simu-dropdown {
  li:hover {
    background-color: #f9f5ff !important;
    color: #7f56d9 !important;
  }
}
</style>

效果

就这样

代码007普通

打赏 收藏 海报 链接