解决Element-ui el-select组件底部空白问题

在使用Element-uiel-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,大功告成了,看下效果

消息盒子
# 您需要首次评论以获取消息 #
# 您需要首次评论以获取消息 #

只显示最新10条未读和已读信息