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

问题产生背景:因项目需求写一个新增功能,在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的下面啦 芜湖~