el-select下拉框位置错乱(在el-dialog中使用)

最新推荐文章于 2024-06-17 14:32:03 发布

怎么吃不饱捏

最新推荐文章于 2024-06-17 14:32:03 发布

阅读量1.5k

点赞数 3

文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/song_song0927/article/details/130575159

版权

在el-dialog中的el-form表单使用el-select时遇到样式问题，下拉框远离输入框。通过在外部div添加class，设置el-select的popper-append-to-body属性为false，然后在scoped样式中调整下拉框位置，成功修复了间距问题。

摘要由CSDN通过智能技术生成

问题产生背景:因项目需求写一个新增功能,在el-dialog中使用了el-form表单,其中涉及到输入和选择,修改完第三方组件样式后发现,el-select的下拉框和el-select距离800米远Σ(⊙▽⊙"a,于是乎就死命琢磨,最后终于解决了(*^▽^*)

1.在el-select外部的div或者其他第三方组件标签中写一个class

<el-form-item label="xxxx" prop="agentRole" class="intelligent-select1">
</el-form-item>

2.在el-seelct标签中添加:popper-append-to-body="false"属性,如果不添加的话,我们查看元素会发现下拉框所在的div和el-select是不同级的,是在最外面,添加以后就可以在el-select的子级元素中看到了.

<el-select :popper-append-to-body="false">
</el-select>

3.在写有scoped的style标签里修改下拉框的样式

.intelligent-select1 ::v-deep .el-select-dropdown,
.intelligent-select2 ::v-deep .el-select-dropdown {
  position: absolute !important;
}

大功告成!下拉框就乖乖的跟在el-select的下面啦芜湖~

关注