el-select选项被弹框遮住

最新推荐文章于 2025-12-12 07:46:10 发布

原创最新推荐文章于 2025-12-12 07:46:10 发布 · 1.6k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#vue #elementui

本文解决了el-select下拉选项被遮挡的问题。通过设置属性transfer=true及:popper-append-to-body=false，确保了选项卡始终可见，避免被其他弹窗覆盖。

打开弹框，里面又select选择器，点击选择器，选项卡会弹出来。但是在做项目的时候出现一个bug，就是选项卡不见了，一开始以为是接口问题，没触发接口，经过一番检查发现是被弹框遮住了，然后网上搜索了一圈方法，又是z-inde什么的，好像对我这里不太有用，还是会出现被遮住的情况。

最后在 el-select 中加入 transfer="true" :popper-append-to-body="false" ！

文章转自：el-select选项被遮挡 - 挽你手 - 博客园

感谢大佬提供方法，最后完全解决，也没有复现。

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

越过山丘哦噢喔

关注关注

3
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

el-select 组件下拉框被遮挡问题

学无的博客

09-28

1万+

发生这种问题的情况 1.当选择框处于页面边缘 2.它的父级又没有使用fixed 定位 3. 下拉框选项内容过长如下图：解决办法 1.element-ui 的el-select 的下拉框定位它会去判断父级是否有fixed 定位如果有那么下拉框也会是采用fixed 定位，这个时候回去判断浏览器的边框和 el-select 的位置去做定位从而不会超出浏览器。 2. 知道了上面的原理，解决办法就是给父级加fixed 定位，我们只要给父级加 fixed 定位不需要给...

前端开发el-select下拉框样式修改方案：解决背景色、hover及字体样式定制问题了文档的核心内容

04-05

内容概要：本文主要讲解了el-select下拉框选项样式的修改方法。文章首先介绍了网上常见的三种修改样式的方法及其存在的问题，接着深入分析了问题产生的原因，即el-select选项的容器不在挂载的div#app中，导致设置的...

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

1 条评论

York Wong 2022.06.08
感谢完美解决

vue中el-select下拉框被遮挡问题

weixin_44768794的博客

12-02

1万+

记录一下最近给我最大困扰的一个问题： element-ui自身有个特点在于 z-index层级是一直变动的，如果不加入其他的样式，比如说自定义UI 或引入其他UI，使用起来是没有问题的，问题在于自定义UI设置了z-index值，就出现了很多很多问题： 1.点击按钮无效，实际是因为弹窗被dialog层遮挡 2.this.¥message、 this.¥confirm被遮挡 (美元符不显示，只能用¥代替一下) 3.也就是今天这个问题，下拉框被遮挡 PS：我是个实习生，全局的东西我不能去动，只能对指定症状下药

el-select 下拉框内容被遮挡

qq_28586135的博客

04-24

2709

el-select 下拉框内容被遮挡

【vue3+elementPlus】在el-table中使用popconfirm、popover、tooltip、select时，出现placement错位或者框被table的列遮挡的解决方案

bbt953的博客

04-18

8619

【vue3+elementPlus】在el-table中使用popconfirm、popover、tooltip、select时，出现placement错位或者框被table的列遮挡的解决方案

在H5页面使用el-select的兼容性处理(IOS)

m0_47763320的博客

02-06

4838

在H5页面中，使用el-select会导致ios用户聚焦时无法唤起软键盘，据说是因为readonly这个属性导致的，官方一直没有修复，所以我们需要手动处理。

遇到el-select选项被遮挡问题？这篇文章告诉你如何解决

希望看完文章的你能够带着答案离开。

02-23

1万+

遇到el-select选项被遮挡问题？这篇文章告诉你如何解决

element-ui 两层dialog，第二层dialog里面的el-select下拉选项被遮盖住了

jingzhuo3185的博客

06-09

5664

element-ui 两层dialog，第二层dialog里面的el-select下拉选项被遮盖住了问题描述：在同一个页面内，弹出两个dialog，第二个dialog在第一个dialog上方。第二个dialog里面是个form表单，表单里的el-select组件下拉选项被遮盖住了。解决思路：下拉框z-index层级太低，所以需要修改下拉框的z-index。但是直接在el-select添加样式，是不会对下拉框有影响的，还好我们在element-ui官网看到el-select 有popper-clas

el-tree-select:基于el-select和el-tree改造的树形选择器（下拉框）组件

05-10

"el-tree-select:基于el-select和el-tree改造的树形选择器（下拉框）组件"是一个自定义的前端UI组件，它结合了Element UI库中的el-select和el-tree两个组件的功能，创建了一个适用于数据层级关系展示的选择器。...

Vue中el-form标签中的自定义el-select下拉框标签功能

10-15

`el-select` 是`el-form` 中常用的组件，用于创建下拉选择框，用户可以在预设的选项中进行选择。在某些场景下，我们可能需要自定义`el-select` 的下拉框标签，以满足特定的需求。本文将详细介绍如何在`el-form` 中...

layui layer select 选择被遮挡的解决方法

10-16

今天小编就为大家分享一篇layui layer select 选择被遮挡的解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

详解element-ui中el-select的默认选择项问题

10-16

在给出的代码片段中，`query`变量被用作`v-model`，并初始化为`'02'`，这意味着组件加载时，`el-select`会显示值为`'02'`的选项，即“你的”。设置默认值的关键在于确保`v-model`的初始值与`el-option`中的某个`...

el-select 下拉框多选实现全选的实现

10-16

- changeSelect方法：监听el-select的值变化，以判断何时添加或移除“全选”选项。 - removeTag方法：处理当“全选”被移除时的行为，即清空所有选项。第二种方法是使用el-checkbox组件创建一个复选框来实现全选...

VUE element-ui之页面全屏时el-select下拉菜单不显示问题解决

HanXiaoXi_yeal的博客

07-27

5986

问题原因：elemrnt-ui会默认将弹出框插入至 body 元素；当设置了某个元素全屏时，会遮挡住原来的select下拉数据。解决方法： <el-select v-model="value" placeholder="区域选择" :popper-append-to-body="false" //加入此行代码，完美解决 > ...

【element-ui】el-dialog中使用el-select，下拉列表被挡住的解决办法

最新发布

weixin_52943021的博客

12-12

【代码】商城后台管理系统 04，商品添加-清空列表。

vue3 element-plus el-select关闭弹框

03-08

<think>好的，用户问的是如何在Vue3和Element Plus中关闭el-select的下拉弹框。我需要先回忆一下Element Plus中el-select的相关API和事件。首先，el-select组件有一个blur方法，可以使其失去焦点，从而关闭下拉框。但可能用户需要的是更直接的控制方式。比如在某个事件触发时关闭下拉框。另外，el-select有一个visible属性，可以用.sync修饰符来双向绑定，控制下拉框的显示与隐藏。不过Vue3中.sync已经被v-model:propName替代。所以可能需要使用v-model:visible来绑定一个变量，通过改变这个变量来控制弹框的关闭。但需要确认Element Plus的el-select是否支持visible这个prop。查阅文档发现，el-select有一个disabled属性，如果设置为true，下拉框不会展开。但用户可能想要的是在特定条件下主动关闭已经展开的下拉框。可能更好的方法是使用ref获取el-select实例，然后调用其blur方法。比如，给el-select设置ref="selectRef"，然后在方法中调用this.$refs.selectRef.blur()。不过在Vue3中，组合式API的写法可能有所不同，需要使用ref来引用组件实例。举个例子，在setup函数中，const selectRef = ref(null); 然后通过selectRef.value.blur()来触发关闭。需要注意组件暴露的方法是否正确。还有一种情况是，当选择选项后希望自动关闭下拉框，这时候el-select默认会在选择后关闭，但如果有特殊情况需要手动触发，比如在@change事件中调用blur方法。另外，可能涉及到点击外部关闭下拉框，这通常由Element Plus自动处理，但如果有自定义需求，可能需要监听事件或者修改相关配置。总结起来，主要的解决方案有两种：一是使用v-model:visible绑定变量来控制显隐，二是通过ref调用blur方法。需要验证这两种方法在Element Plus中的可行性。查阅Element Plus的官方文档，发现el-select有一个visible属性，可以通过v-model:visible绑定，当设置为false时可以关闭下拉框。同时，blur方法确实存在，用于让选择器失去焦点，从而关闭下拉框。因此，回答用户时需要分情况说明这两种方法的具体使用步骤和代码示例。同时提醒用户注意Vue3的语法变化，比如使用ref和组合式API的写法。</think>在 Vue3 + Element Plus 中关闭 el-select 下拉弹框的两种常用方法： ```html <template>  <el-select v-model="selectedValue" v-model:visible="isDropdownVisible" @visible-change="handleVisibleChange" > <el-option label="选项1" value="1" /> <el-option label="选项2" value="2" /> </el-select>  <el-select ref="mySelect" v-model="selectedValue" @change="handleChange" > <el-option label="选项A" value="A" /> <el-option label="选项B" value="B" /> </el-select> </template> <script setup> import { ref } from 'vue'; // 方法1相关代码 const isDropdownVisible = ref(false); const handleVisibleChange = (visible) => { // 可在此处添加关闭条件判断 if(visible) { // 需要自动关闭时可设置为 false // isDropdownVisible.value = false; } } // 方法2相关代码 const mySelect = ref(null); const handleChange = () => { mySelect.value.blur(); // 调用 blur 方法关闭弹框 } </script> ``` **两种方法对比：** 1. **v-model:visible 控制法** - 直接控制下拉框显隐状态 - 需要维护一个额外的响应式变量 - 适合需要精确控制展开/关闭时机的场景 2. **ref + blur() 方法** - 更接近原生操作方式 - 自动处理状态变化 - 适合在值变化后立即关闭的场景 **注意事项：** 1. Element Plus 2.3.8+ 版本支持 `visible` 属性 2. 使用组合式API时需确保正确使用 `ref` 引用 3. 避免在同一个操作中同时使用两种方法 4. 下拉框关闭时会自动触发 `blur` 事件根据具体需求选择合适的方法，常规交互推荐使用第二种方法，需要复杂状态控制时建议使用第一种方法。