Vue中修改ElementUI的el-select樣式不起作用


問題

使用el-select時下拉框底部有多余的空白,但是修改css卻不起作用。
效果如下:
image

解決過程

查閱了一些博客,基本都是說使用樣式穿透,但是並沒有什么作用!
雖然設置全局樣式,可以起作用,但是這樣就會污染全局樣式,並不是一個好的選擇!
后面發現,el-select默認掛在在了body上,和當前頁面不在一起,就導致了當設置<style lang="scss" scoped>樣式無效。

解決方案

el-select添加下面2個屬性:

 popper-class = "selectStyle"
:popper-append-to-body = "false"

並在css中設置

/deep/ .el-select-dropdown__wrap.el-scrollbar__wrap {
  overflow: auto;
}

這樣就解決了問題
image


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM