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