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

💡 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-selectpositionrelative

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

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

相关推荐
百锦再3 天前
Vue使用element plus组件的细节问题之时间格式
前端·javascript·vue.js·vue·element·date·elementsplus
追光的栗子7 天前
vue3+vite 项目中怎么引入 elementplus 组件库
前端·vue.js·element
拾光拾趣录9 天前
Element Plus表格表头动态刷新难题:零闪动更新方案
前端·vue.js·element
页面仔Dony10 天前
UI组件二次封装的正确打开思路
前端·element
karl_hg12 天前
Element Plus 自定义(动态)表单组件
前端·vue.js·element
雲墨款哥1 个月前
记录:vue-next-admin 项目 element-plus 国际化包报错的解决办法
前端·element
bo521001 个月前
Element Plus 虚拟树形组件子节点点击导致勾选框自动勾选问题排查与解决
vue.js·element
JunjunZ1 个月前
ElementUI Tree组件的父子节点联动实现
vue.js·element
Endeavour_T1 个月前
怎么调整Element-ui组件样式,调到崩溃!!!
element
金金金__2 个月前
Element-Plus:popconfirm与tooltip一起使用不生效?
前端·vue.js·element