解决element-ui中select下拉框popper超出弹框问题

王哈哈猿

已于 2022-09-26 15:12:10 修改

阅读量1.4k

点赞数 2

文章标签： vue.js javascript 前端 elementui

于 2022-09-23 18:04:57 首次发布

本文链接：https://blog.csdn.net/w643462659/article/details/127015750

版权

本文主要介绍了在使用Element UI的el-select组件时遇到的下拉框(popper)超出弹框的问题，以及尝试了通过控制滚动关闭弹框、修改popper-append-to-body属性和调整定位(position: absolute, top 和 left)等方法后，最终解决问题的实践过程。" 103891922,7874436,MATLAB GUI：创建与响应机制解析,"['MATLAB开发', '图形用户界面', 'GUI设计', '事件处理']

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

记录一下
使用el-select el-select-dropdown 超出弹框网上找了一些方法，控制滚动关闭弹框，用了一下不太理想，当el-select-dropdown 中有滚动条会出现直接关闭，然后试了一下修改popper-append-to-body ，在修改定位position：absolute，top 和 left
出现的问题
在这里插入图片描述
解决后

//main.js 全局配置select popperAppendToBody 
ElementUI.Select.props.popperAppendToBody.default = false

//app.vue 中
.el-select{

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

王哈哈猿

关注关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

关于ElementUi中select框在页面滚动时el-option超出元素区域的问题

daihai1994的博客

01-26

1326

关于ElementUi中select框在页面滚动时el-option超出元素区域的问题问题：在项目开发中发现elementUi中的select组件在页面滚动时会随着页面滚动并遮盖页面，如下图：问题：在项目开发中发现elementUi中的select组件在页面滚动时会随着页面滚动并遮盖页面，如下图： 1.创建js文件 // fackClickOutSide.js let lock = true; let el = null; const MousedownEvent = new Event('moused

Element-UI中select的下拉框popper 定位超出可视区的解决方案

beiniao123的博客

09-10

4459

一、问题描述：当弹出框有表格el-table，el-table中有el-select，当滚动滚动条时，el-select的下拉框超出了弹出层二、问题分析产生该问题的原因是，滚动表格时，el-select的输入框被隐藏了，但是下拉框el-popper使用的定位方法是fixed，当显示时，使用的z-index非常大，因此显现在最上层，当滚动滚动条往下移动时el-popper并没有被隐藏。三、解决方案当表格滚动时，直接隐藏掉下拉框 四、代码获取父级元素，并监听该元素的滚动事件，这里使用的是el-t

参与评论您还未登录，请先登录后发表或查看评论

解决element UI中 select下拉框 el-select-dropdown el-popper超出el-dialog弹框的问题

shadow__jing的博客

07-26

3989

【问题】：在elementUI 中，el-dialog的内容比较多，出现滚动条，且内容包含input输入框、select下拉框、时间选择器、cascader级联选择器等，在点开select下拉选择框后并向下滚动鼠标，会出现下拉框跑出el-dialog的区域的情况（有可能离el-dialog的区域很远），造成页面的展示效果混乱。【解决方案】：我们可以在鼠标滚动的时候，让select弹框隐藏，这样就可以解决select 下拉框在el-dialog外面的问题了。在自己封装的el-dialog的组件里。

vue2修改element-ui中select组件下拉选项内容过长导致下拉框宽度过长问题

最新发布

weixin_47102346的博客

08-21

1115

el-select的focus获取焦点事件、popper-append-to-body属性，修改element-ui源码，element-ui中select下拉项内容过长导致下拉框宽度过宽问题的修改

关于el-select下拉框在弹窗内滚动时脱离问题

Momo_dyx的博客

10-26

1089

因为el-select的下拉框的z-index位置最高，所以在弹窗滚到一定位置时出现脱离、超出弹窗的问题

elementui的el-select下拉框超出弹窗问题研究

yanlovesky的博客

07-14

3079

类似这种，f12看了下样式，发现下拉框朝上翻改变了一个属性，x-placement="top-start",下拉框朝下翻，就是x-placement="bottom-start"，另外还伴随着位置top的改变，这就说明，至少源码是有判断的，在一个位置范围内朝上翻，在范围之外朝下翻，现在出现这个问题，就说明原来的计算是有问题的，那么有一个比较明确的目标，怎么重新定义这个计算，或者自己能够定义一个事件控制这个属性，有了方向就一直在百度上和elementui官网上查找，发现没有这个属性，好难，有处理过类似问...

elementui 下拉框出现脱离超出弹框解决方案

weixin_54902466的博客

11-10

2611

elementui 下拉框超出脱离弹框滚动解决方案

关于解决ElementUi中select框在页面滚动时el-option超出元素区域的问题+ cascader滚动超出问题

01-25

关于解决ElementUi中select框在页面滚动时el-option超出元素区域的问题+ cascader滚动超出问题

通过自定义指令,解决弹窗内容滚动时el-select下拉框,超出显示范围问题.

白云苍狗

06-27

3730

el-select下拉框超出显示范围问题,通过自定义指令,让el-select下拉框自动收回

在element-ui的select下拉框加上滚动加载

12-12

在项目中，我们需要运用到很多来自后端返回的数据。...于是《在element-ui的select下拉框加上滚动加载》诞生了。这里通过自定义封装vue指令进行封装。（什么是指令：官方指令叫v-on,v-model）以下以element-ui中的sel

Element-ui中元素滚动时el-option超出元素区域的问题

12-01

复现场景, 看图分析原因为简单起见, 把选项区域描述为popperEl popperEl的z-index 比较大, 会覆盖在其他元素上面 popperEl默认是插入body元素的(可以将popper-append-to-body设为false后不插入到body) popperEl是在mouseup事件里去做隐藏逻辑的, 而按下鼠标, 移动滚动条的时候, 并没有触发mouseup事件. popperEl并没有监听滚动事件(没法监听, 也没必要监听) 解决方案方案一我最初想到的解决方案是通过css解决，通过popper-class属性给Select下拉框添加类名,然后用

el-select框在页面滚动时el-option超出元素区域的问题...

qq_41742961的博客

12-21

841

fakeClickOutSide.js let lock = true; let el = null; const MousedownEvent = new Event('mousedown', {bubbles:true}); const MouseupEvent = new Event('mouseup', {bubbles:true}); const fakeClickOutSide = () => { document.dispatchEvent(MousedownEvent);

VUE中显示范围有限，元素滚动时el-option超出元素显示范围

温柔咩咩的博客

01-11

2824

首先感谢在遇到问题时搜索到的一些答案，同时指路优秀文章：Element-ui中元素滚动时el-option超出元素区域的问题 - 掘金 (juejin.cn) 我遇到的问题和链接中楼主的问题几乎是同一个问题，奈何

Element select框设置100%过长，导致option的hover效果超出popper框

weixin_42490538的博客

12-28

560

element select

【element】 el-select 下拉框内容跟随页面滚

rbgg_mp的博客

02-13

2026

element el-select

elementui下拉框 选项滚动超出容器

user-jianyong的博客

05-07

667

app.vue <template> <div id="app"> <router-view /> </div> </template> <script> import fakeClickOutSide from "@/mixins/fackClickOutSide.js" export default { name: "App", mixins: [fakeClickOutSide] }; </scri