在使用Element-ui中el-select组件时，出现底部有空白问题，无论怎么设置都无效，后来花点时间研究解决了，在此分享记录下

问题定位

页面上具体效果如图，底部文字显示不全
效果

经过审查源码，发现底部有-17px，问题就在这里，我们这里需要将它去除
源码分析

思考过程

度娘了一些资料，基本都是说使用样式穿透，经过测试并没有什么作用！

当然配置全局样式，有效果，但是会污染其它样式，所以我没有采用。

后来，经过研究，发现el-select是挂载在body上的，也就是说和当前页面并不在一起，所以设置<style lang="scss" scoped>无效。

解决方案

在el-select组件加上一下两个属性

1
2
3
4
5
6
<el-select
    v-model="dataForm.deviceId"
    placeholder="请选择"
+    :popper-append-to-body="false"
+    popper-class = "selectStyle"
  ></el-select>

同时在css中设置样式

1
2
3
.el-scrollbar__wrap {
  margin-bottom: 0px !important;
}

ok，大功告成了，看下效果