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">
<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-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>
效果
文章來源：http://www.zghlxwxcb.cn/news/detail-698402.html
就這樣文章來源地址http://www.zghlxwxcb.cn/news/detail-698402.html
到了這里，關于Element UI更改下拉菜單el-dropdown-menu樣式的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！
