element-ui下拉框选项被覆盖的问题

最新推荐文章于 2024-05-16 02:53:35 发布
最新推荐文章于 2024-05-16 02:53:35 发布
阅读量4.3k 收藏
点赞数
分类专栏： element ui 文章标签： element ui 被覆盖 下拉框被覆盖 z-index el-select
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43856422/article/details/99956121
版权

在写项目的时候，发现下拉框的选项被覆盖掉了，显示不出来，这个问题是z-index的。

下拉框选项的z-index的值在2000左右，在运行的过程中，下拉框的选项的html文件会直接跳到body里面，所以你在页面其它（div）盒子设置的z-index就可能成为它的同级，对它进行覆盖，所以在html中设置的z-index不要过高，放置出现覆盖element ui组件的问题。
如图在这里插入图片描述

莫道 开发
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
el-select 组件下拉框被遮挡问题
学无的博客
09-28 8021
发生这种问题的情况 1.当选择框处于页面边缘 2.它的父级又没有使用fixed 定位 3. 下拉框选项内容过长 如下图： 解决办法 1.element-ui 的el-select 的下拉框定位它会去判断父级是否有fixed 定位如果有那么下拉框也会是采用fixed 定位，这个时候回去判断浏览器的边框和 el-select 的位置去做定位从而不会超出浏览器。 2. 知道了上面的原理，解决办法就是给父级加fixed 定位，我们只要给父级加 fixed 定位不需要给...
element组件 下拉框在遮盖层后
qq_22841387的博客
07-28 443
下拉框在遮盖层后下拉框在遮盖层后两个问题z-index!important使用`popper-class`添加样式实现代码 下拉框在遮盖层后 两个问题 z-index !important 今天在完成app制作的时候出现了这样的问题，见下图 选择框在遮罩层之后 一番调试一下，发现是z-index 的锅 参考链接：z-index 现在我们需要将这个样式，放入css样式中进行修改 但是发现，我们根本无法对下拉框的样式进行修改 下拉框与app为同一级，无法修改 一番查找下来，发现可以使用 ！importa
【element-ui】dialog中使用select，下拉列表被挡住
nefu1234的博客
04-28 6174
这个问题是因为下拉框层级太低被挡住了，修改层级就可以了 <el-dialog title="增加指标" :visible.sync="adddialogVisible" width="30%" center> <el-fo...
VUE element-ui 之多级下拉菜单（筛选框）_elementui 多层级下拉框(1)
最新发布
2401_84618926的博客
05-16 451
时间筛选
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：我是个实习生，全局的东西我不能去动，只能对指定症状下药
element-ui 两层dialog，第二层dialog里面的el-select下拉选项被遮盖住了
jingzhuo3185的博客
06-09 5296
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
element ui 时间筛选样式遮盖问题修复
sinat_33255495的博客
11-04 1481
但是这次需求的是通过 tab 切换同时切换 el-date-picker,第一次初始化时是成功了，但每当点击 tab 就会重现上述遮盖问题。经过排查发现，tab 切换时时间筛选的焦点没有消失，导致绑定到 body 失败。此时我们只需清除焦点即可。
在element-ui的select下拉框加上滚动加载
10-17
Element-UI的`<el-select>`组件提供了一个方便的方式来选择数据，但默认情况下，当数据量过大时，一次性加载所有选项可能会导致页面性能下降。为了解决这个问题，我们可以实现一个滚动加载功能，即在用户滚动到...
解决VUE项目使用Element-ui 下拉组件的验证失效问题
01-18
在使用Element-ui组件做项目开发时候有可能会使用下拉框组件,如果下拉框组件的option选项是使用v-if指令遍历的, 这样也没有问题,但是如果加上multiple属性,也就是可以多选 就会出现下拉框验证时失效问题. 问题现象：...
Element-ui中元素滚动时el-option超出元素区域的问题
10-16
在Element-ui中，el-option元素在用户滚动时超出其父元素区域的问题是一个常见的困扰开发者的问题。这通常是由于Element-ui的下拉菜单（dropdown）组件，即el-select与el-option的交互方式导致的。Element-ui的el-...
Element-ui中 选择器（select）多选下拉框实现全选功能.zip
10-10
在这个特定的场景中，我们关注的是Element-UI中的选择器组件——`<el-select>`，特别是如何实现多选下拉框的全选功能。在实际应用中，全选功能常用于批量操作，如用户一次性勾选多个选项进行批量删除、导出等操作。 ...
解决Dropdown下拉菜单展开后子菜单被遮挡一部分的问题
weixin_64101999的博客
10-27 2218
他会根据。
分页下拉框被el-tabs遮挡
weixin_42190844的博客
02-14 1779
在看同事写的页面时，发现点击分页时，弹出的下拉框会被 el-tabs头部遮挡。 第一时间想到的是，vxe-table与element-ui的z-index设置冲突。 通过审查元素可以知道，这里下拉框的z-index为102。element-ui的z-index默认为2000。 但我无论是提高下拉框的z-index还是降低element-ui的z-index都没有效果。 最后发现是.el-tabs__content设置了overflow:hidden导致的隐藏，而不是遮挡。 解..
elementui弹出框被遮罩层挡住的问题
nss33678的博客
03-28 598
2，:modal-append-to-body='false'或者:append-to-body='true'，改变他的这个属性就好。但是遮罩层的范围会变。1，el-dialog直接放在组件最外层div中，就不会出现遮罩问题。偶然发现有个页面会出现这种问题，有两个解决方法。
【element-ui】el-dialog中使用el-select，下拉列表被挡住的解决办法
热门推荐
Pluto
05-24 1万+
一开始以为没获取到列表数据，后来发现有， 只是下拉列表被模态框挡住了，定位到每次鼠标经过打开dialog的按钮时，dialog的层级都会递增； 后来找到element-ui中的源码的这一行： 发现这样dialog的层级就不会递增了（固定在2000），列表也能正常展示了。 但是不确定会不会对其他组件造成影响，目前还没发下，如果有问题再来更新。 这句代码的路径： ...
el-dropdown 在火狐浏览器，下拉框先被其他元素覆盖1s后才置于最上层？
SM_Cute的博客
10-20 232
el-dropdown 在火狐浏览器，下拉框先被其他元素覆盖1s后才置于最上层？
element ui 的侧边栏被遮挡
weixin_37601321的博客
05-20 486
侧边栏被这个子页面中的下拉框遮挡,: 主要原因: 子页面中的div 设置了z-index属性,原先该属性设置为9999,改成998后,问题就解决了 <div style=" width: 20%; height: 100%; position: fixed; top: 80px; z-index: 998; " > ...
el-select选项被弹框遮住
zqq_1119的博客
11-02 1374
打开弹框，里面又select选择器，点击选择器，选项卡会弹出来。但是在做项目的时候出现一个bug，就是选项卡不见了，一开始以为是接口问题，没触发接口，经过一番检查发现是被弹框遮住了，然后网上搜索了一圈方法，又是z-inde什么的，好像对我这里不太有用，还是会出现被遮住的情况。 最后在 el-select 中加入transfer="true" :popper-append-to-body="false"！ 文章转自：el-select选项被遮挡 - 挽你手 - 博客园 感谢大佬提供方法，...
列表，更多，显示下拉菜单的使用，z-index
u012148262的博客
02-08 1089
今天想做一个hover显示下拉菜单的功能，发现上面div怎么都覆盖不了下面列表：z-index：当你定义的CSS中有position属性值为absolute、relative或fixed, 用z-index此取值方可生效。...
封装element-ui下拉框组件
04-29
好的，下面是封装element-ui下拉框组件的步骤： 1. 创建一个基于element-ui下拉框组件的自定义下拉框组件。 2. 在组件中设置props参数，用于接收下拉框的数据源。 3. 使用el-select组件，通过v-for指令对下拉框的选项进行循环遍历，并将每一项的value和label值与props参数进行绑定。 4. 设置组件的v-model属性，用于双向绑定选中的下拉框项的值。 5. 为组件设置事件监听器，通过emit()方法向父组件传递选中的下拉框项的值。 以上就是封装element-ui下拉框组件的基本步骤，希望能对你有所帮助。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值