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

最新推荐文章于 2024-06-04 11:39:56 发布
最新推荐文章于 2024-06-04 11:39:56 发布
阅读量961 收藏 4
点赞数 4
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/momo_dyx/article/details/134048797
版权

1.问题复现

2.出现原因

因为el-select的下拉框的z-index位置最高，所以在弹窗滚到一定位置时出现脱离、超出弹窗的问题，但是如果降低z-index的数值会被其他元素覆盖。

3.解决方法

监听外层元素的滚动事件，只要触发就将下拉框关闭，即设为失焦状态，就可以解决了。

代码如下：

Momo_dyx
关注
  • 4
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
element 中添加一个属性就可解决 el-select 和 el-cascader 下拉项 不随页面滚动问题
m0_46862838的博客
06-15 1616
经常会遇到滚动页面时，下拉框总是会随着页面滚动条变化而发生改变，或者滚动页面时下拉框就会覆盖在上面层级较高，这样用户体验就非常不好，所以就需要固定
在element-ui的select下拉框加上滚动加载
12-12
在项目中，我们需要运用到很多来自后端返回的数据。...于是《在element-ui的select下拉框加上滚动加载》诞生了。 这里通过自定义封装vue指令进行封装。（什么是指令：官方指令叫v-on,v-model） 以下以element-ui中的sel
element中下拉框select在长页面滚动时，下拉弹框没有跟随下拉框跑路
weixin_41166682的博客
06-05 9736
1.需求： 在页面滚动过程中，弹框并没有跟着下拉框一起跑，一直固定在那个位置 2.修改： 在tamplate中： <el-col :span="10" class="tb-row" style="float: right;"> <el-form-item label="经营性质" prop="proTypeCode"> <el-select v-model="formData.proTypeCode" placeholder="请选择经营性质" filterabl
【element】 el-select 下拉框内容跟随页面滚
rbgg_mp的博客
02-13 1984
element el-select
el-select解决下拉框跟随页面滚动问题
最新发布
sinat_34896766的博客
06-04 711
el-select存在会跟着页面滚动的问题，加上:popper-append-to-body="false"属性即可使下拉框跟随el-selct滚动。
【elementUI样式】模态框中的el-select下拉框不跟随页面滚动问题
前端代码小白的日常博客
11-29 4099
popper-append-to-body 属性是 Element-ui 官方文档中提供的一个属性，该属性的用途: 就是将 el-select 选项的内容移动 div#app 当中，默认值是 true;当页面滚动的时候，el-select的内容跟随页面移动，不是跟随el-select下面的input进行移动，想要实现的效果如下图。important 为所有样式的最高级，可以通过外联的样式来个更改el-select本身自带的样式。模态框中的el-select下拉框不跟随页面滚动问题。
Cascader 级联选择器以及select下拉选框随着页面滑动样式脱离解决方法
mingtian18的博客
11-11 1908
Element UI 在table中使用Cascader 级联选择器以及select下拉选框随着页面滑动样式脱离解决方法 现象 Cascader解决办法 1.给el-cascader组件添加属性 :append-to-body=“false”，意思是不将弹出框插入值body元素，刷新页面，级联框消失 2.将该组件的父级设置样式position: reletive，而本组件自带的position: reletive改为position: static Select解决办法 1.给el-select组件添加属
关于el-select下拉框不跟随页面滚动问题
m0_54882260的博客
06-02 3190
关于el-select下拉框不跟随页面滚动
select滚动时与下拉框分离 elementui
m0_61177996的博客
09-07 492
select滚动时与下拉框分离 elementui
通过自定义指令,解决弹窗内容滚动时el-select下拉框,超出显示范围问题.
白云苍狗
06-27 3524
el-select下拉框超出显示范围问题,通过自定义指令,让el-select下拉框自动收回
el-select 下拉框多选实现全选的实现
10-16
总的来说，文章提供的两种实现el-select下拉框全选功能的方法，为开发者在使用Element UI进行界面开发时，提供了实用的解决方案和参考。通过这些方法，开发者可以灵活地在网页上实现复杂的交互功能，提升用户操作的...
Vue中el-form标签中的自定义el-select下拉框标签功能
10-15
在某些场景下，我们可能需要自定义`el-select` 的下拉框标签，以满足特定的需求。本文将详细介绍如何在`el-form` 中实现这一功能。 首先，我们来看一个基本的`el-form` 中`el-select` 的使用例子： ```html <el-...
Vue + Element-ui的下拉框el-select获取额外参数详解
10-14
在Vue.js框架中，Element-ui库提供了一套丰富的UI组件，其中包括用于创建下拉框的`el-select`组件。在实际开发中，我们可能需要在用户改变选择时获取额外的信息，比如当前行的数据或者自定义的属性。本文将详细介绍...
解决element UI中 select下拉框 el-select-dropdown el-popper超出el-dialog弹框的问题
shadow__jing的博客
07-26 3724
【问题】： 在elementUI 中，el-dialog的内容比较多，出现滚动条，且内容包含input输入框、select下拉框、时间选择器、cascader级联选择器等，在点开select下拉选择框后并向下滚动鼠标，会出现下拉框跑出el-dialog的区域的情况（有可能离el-dialog的区域很远），造成页面的展示效果混乱。【解决方案】：我们可以在鼠标滚动的时候，让select弹框隐藏，这样就可以解决select 下拉框在el-dialog外面的问题了。在自己封装的el-dialog的组件里。
解决：el-select，el-cascader或el-date-picker的下拉框不随滚动条滚动。
qq_38969618的博客
06-22 5418
el-select下拉框不随滚动条滚动
弹窗中的下拉框随底部页面滚动，导致框体错位
weixin_55862915的博客
06-09 194
直接在select组件（我用的是antd组件库，element在这能不能行也可以试下）里加入。选择器跟着鼠标滚动，当时我是把选择器放在了弹窗里，只需要将选择器也定位在弹窗上，问题就解决了。直接看图，扣费项目/费用的下拉框由于鼠标的滚动出现了错位。别管是这些选择器的哪一个，加治百病。
element 中添加一个属性就可解决 el-select 和 el-cascader 等下拉项 不随页面滚动问题
IT_iosers的博客
06-27 1389
element 中添加一个属性就可解决 el-select 和 el-cascader 等下拉项 不随页面滚动问题
el-select下拉框不跟随页面滚动/不随滚动条滚动问题/页面滚动时位置错乱, element 下拉选项层级过高问题
chn4556233的博客
07-19 1639
el-select下拉框不跟随页面滚动/不随滚动条滚动问题/页面滚动时位置错乱, element 下拉选项层级过高问题
el-select 下拉框
09-20
el-select 下拉框是一个基于Element UI框架提供的组件，用于实现下拉选择的功能。通过el-select可以实现以下操作： - 添加搜索属性：使用filterable属性可以将下拉框设置为可搜索的，用户可以输入关键字进行筛选。 - 下拉框切换方法：可以使用v-model指令来绑定下拉框的选中值，通过改变绑定的数据可以实现下拉框的切换。 - 下拉选项显示：通过el-option组件可以定义下拉框中的选项，可以设置选项的label、value等属性，同时可以通过v-for指令循环生成多个选项。 在给定的引用中，还介绍了el-select下拉框的多选以及筛选方法实现高亮显示的方法。通过设置filter-method属性可以定义自定义的筛选方法，可以根据输入的关键字对下拉选项进行筛选。同时，还提供了setHighlight方法来实现匹配文字的高亮显示。 以上就是el-select下拉框的基本使用及一些常用功能的介绍。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值