在使用Element-ui
中el-select
组件时,出现底部有空白问题,无论怎么设置都无效,后来花点时间研究解决了,在此分享记录下
问题定位
页面上具体效果如图,底部文字显示不全
![图片[1]-ElementUI中el-select样式修改无效问题](https://img.lovelu.top/2023/03/ques1.png)
经过审查源码,发现底部有-17px,问题就在这里,我们这里需要将它去除
![图片[2]-ElementUI中el-select样式修改无效问题](https://img.lovelu.top/2023/03/ques2.png)
思考过程
度娘了一些资料,基本都是说使用样式穿透,经过测试并没有什么作用!
当然配置全局样式,有效果,但是会污染其它样式,所以我没有采用。
后来,经过研究,发现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,大功告成了,看下效果
![图片[3]-ElementUI中el-select样式修改无效问题](https://img.lovelu.top/2023/03/ques3.png)
© 版权声明
本站网络名称:
满心皆欢喜
本站永久网址:
https://www.lovelu.top
网站侵权说明: 本网站的文章部分内容可能来源于网络,仅供大家学习与参考,如有侵权,请联系站长QQ837054936删除处理。
1 本站一切资源不代表本站立场,并不代表本站赞同其观点和对其真实性负责。
2 本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报
3 本站资源大多存储在云盘,如发现链接失效,请联系我们我们会第一时间更新。
THE END
暂无评论内容