解决Element-ui el-select组件底部空白问题
在使用
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,大功告成了,看下效果
空空如也!