在使用Element-ui中el-select组件时，出现底部有空白问题，无论怎么设置都无效，后来花点时间研究解决了，在此分享记录下
问题定位
页面上具体效果如图，底部文字显示不全
经过审查源码，发现底部有-17px，问题就在这里，我们这里需要将它去除
思考过程
度娘了一些资料，基本都是说使用样式穿透，经过测试并没有什么作用！
当然配置全局样式，有效果，但是会污染其它样式，所以我没有采用。
后来，经过研究，发现el-select是挂载在body上的，也就是说和当前页面并不在一起，所以设置<style lang="scss" scoped>无效。
解决方案
在el-select组件加上一下两个属性
<el-select
v-model="dataForm.deviceId"
placeholder="请选择"
+ :popper-append-to-body="false"
+ popper-class = "selectStyle"
></el-select>同时在css中设置样式
.el-scrollbar__wrap {
margin-bottom: 0px !important;
}ok，大功告成了，看下效果
全部评论 1