Element UI 弹窗中 el-select 下拉框位置错乱的解决方案

slmev2025-04-14 14:51

💡 Element UI 弹窗中 el-select 下拉框位置错乱的解决方案

🧩 问题描述

在使用 "element-ui": "^2.15.3" 时，将 <el-select> 用在 <el-dialog> 弹窗中，可能会遇到这些问题：

下拉框漂浮在弹窗外部
不随弹窗滚动移动
位置错乱、容易遮挡

这是因为 Element UI 内部使用了 Popper.js ，默认采用 position: fixed，导致下拉框脱离原本布局结构。

✅ 最佳解决方案

1️⃣ 设置 el-select 属性

ini 复制代码

<el-select
  v-model="value"
  :popper-append-to-body="false"
  popper-class="custom-popper"
>
  <el-option label="选项1" value="1" />
  <el-option label="选项2" value="2" />
</el-select>

2️⃣ 自定义样式修正定位

css 复制代码

.custom-popper {
  position: absolute !important;
  top: 100% !important;
  z-index: 1000 !important;
}

3️⃣ 保证`.el-select`的`position`为`relative`

arduino 复制代码

// 框架默认是relative
.el-select {
  position: relative;
}

📌 原理说明

:popper-append-to-body="false"：禁止下拉框挂载到 body；
.custom-popper：用 absolute 替代默认的 fixed 定位；
父容器需为 relative，让 absolute 正确定位参考。

✅ 效果总结

✅ 下拉框在弹窗内显示，位置准确
✅ 弹窗滚动时，下拉框随之移动
✅ 不遮挡、不漂浮、不穿透

✍ 总结一句话

通过禁止挂载到 body + 自定义定位类 .custom-popper，可以完美解决 el-select 在弹窗中的下拉错位问题。

📦 使用版本："element-ui": "^2.15.3" 👨‍💻 作者：@slmev

如果对你有帮助，欢迎点赞 ⭐ 收藏 ✨ 留言 💬！