el-cascader组件被layer弹窗遮住

最新推荐文章于 2023-07-11 18:02:38 发布
最新推荐文章于 2023-07-11 18:02:38 发布
阅读量854 收藏
点赞数
分类专栏： Vue 文章标签： vue
张朗的博客文章
本文链接：https://blog.csdn.net/weixin_43937526/article/details/119837290
版权

el-cascader组件有默认设置的z-index，我们重新设置不了的。但是我们可以换一个思路，既然设置不了el-cascader组件的z-index，那我们可以设置layer弹窗的z-index的大小。只需要layer弹窗的z-index的数值小于el-cascader组件的z-index数值即可。

设置如图所示：（z-index:2000）

结果如图所示：

 

@至尊宝～
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
el-Cascader联级弹框的显示被el-dialog覆盖（z-index导致）
qq_51720257的博客
04-06 780
el-Cascader联级弹框的显示被el-dialog覆盖（z-index导致）
解决在IView的对话框中使用ElementUI的多选级联组件el-cascader出现的问题
小匠的Blog
12-14 1679
解决在IView的对话框中使用ElementUI的多选级联组件el-cascader出现的问题 由于IView的级联组件不支持多选，所以需要采用ElementUI的级联组件 问题：下拉选项随机性消失，点击之后看不到级联面板弹出 原因：由于级联面板显示层级z-index低于Iview的model，从而遮住级联组件 解决方案： 在APP.vue的样式中添加： body > div.el-popper.el-cascader__dropdown { z-index: 9999 !importan
iview select、Cascader等下拉底部被部分遮挡
wang_xiao_ye的博客
05-04 307
【代码】iview select、Cascader等下拉底部被部分遮挡。
element-ui框架的el-dialog弹出框被遮罩层挡住了，vue-element-ui弹出框和el-select层级混乱
qq_42483780的博客
08-20 4944
Element ui中弹出框、Select 选择器等等弹出被遮盖的问题处理方法 这种问题一般出现在有多个弹出框、弹出框上有select选择器这两种情况。两种情况不同的处理方式如下： 情况A：有多个弹出框，你想要的效果可能是 页面->弹出框A->弹出框B，但是实际上出现的是 页面->弹出框B->弹出框A 如图所示。图是在网上找的 遇到这种情况不要慌，可以在el-dialog标签里添加 : modal-append-to-body=‘false’ 参数：modal-append-to-b
el-dialog弹出框内容被遮罩层遮住了
drunk2的博客
07-14 572
el-dialog遮罩层遮挡弹出内容
ElementUI中的级联选择框cascader显示不全占满浏览器的问题
厚积薄发
03-29 2311
在ElementUI的2.13.0版本中直接引入级联选择框cascader在浏览器中显示异常，数据过多时级联选择框弹出来的panel高度占满浏览器，为解决此问题只需要在global.css中添加.el-cascader-panel{ height: xxxpx }即可解决此问题。 ...
vue el-cascader所需要的省市区街道联动的数据格式
07-26
今天找到了大半天，没找到合适的 vue el-cascader 省市区街道4级联动的数据，并且支持维护修改的。 于是自己做了一个。 代码非常简单，重要的符合这个格式的数据，这就是我这个懂后端程序员的优势了。
实现el-cascader组件点击文字即选中效果
最新发布
05-30
实现el-cascader组件点击文字即选中效果
uniapp-cascader
11-14
本篇文章将聚焦于uniapp的一个特定组件——uniapp-cascader，一个用于实现级联选择功能的强大组件。我们将探讨其核心特性、应用场景以及如何在实际项目中有效利用它。 uniapp-cascader是一个专门为uniapp框架设计的...
elp-cascader:基于'element-ui'和'vue-virtual-scroller'的Vue组件
05-28
elp-cascader Cascader based on 'element-ui' and 'vue-virtual-scroller'@vueblocks/elp-cascader基于element-ui和vue-virtual-scroller的级联选择器，用虚拟列表的方式逐级渲染列表。适用于数据量较大的场景。...
使用element中el-cascader级联选择器：实现省市区街道筛选、动态懒加载以及回显
12-22
全国省市区街道的json数据
解决element 新版本cascader级联选择器的各种bug
前端与计算机相关知识的分享，博主的qq523235674
01-19 2341
第一个问题：下拉框高度过长导致部分内容看不见 解决办法： 1.在浏览器中审查下拉框元素 2.在css中更改高度 .el-cascader-panel { height: 300px; } 第二个问题：圆圈文本问题 取消圆圈解决方案： .el-cascader-panel .el-radio { width: 100%; height: 100%; z-index: 10; position: absolute; top: 10px;
vue+elementui项目中遇到的坑/难题
misschengispink的博客
04-22 4269
1.Pagination 分页 需求： 不需要这么多只需要展示3个 但是传:pager-count="3"会报错，因为官方限制了数字范围，不能小于5…
element-ui使用Cascader 级联选择器遇到的问题
fangqi20170515的博客
04-11 1176
方法1：将radio隐藏，扩大选中区域，点击红色框的区域选中值，点击箭头所在蓝色框的区域，展示子选项。方法2：修改次级菜单的展开方式，默认的是‘click’，鼠标移入时展示子选项。具体为啥不知道，然后通过百度尝试了各种方法解决了这个问题。，但是这种方式，当嵌套过深的时候，体验就不是很好。
解决el-cascader中树型结构自定义显示层级及编辑时数据回显
Tiger_Paul的博客
06-26 2864
使用el-cascader做多层级菜单，如果定义了最后一级不能做为父级（不能有子级）情况，则在级联菜单中，就不要显示最后一层子级菜单。可以通过再次查询数据库获取所需要的层级菜单，但是小编不想再查数据库，所以通过对数组过滤筛选出所要的数据。.........
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-cascader实现同一级的二级只能单选，但是一级可以多选
yorcentroll的博客
07-11 5899
但是其实还有一个小问题，那就是用户还是能看到面板闪了一下的，因为被关闭了又打开了一次。 但是本人已经不想折腾， 谁有本事谁来解决这个问题。希望有大神看到最后，能伸出援手，给出更完美的方案，谢谢！
el-select 组件下拉框被遮挡问题
学无的博客
09-28 8200
发生这种问题的情况 1.当选择框处于页面边缘 2.它的父级又没有使用fixed 定位 3. 下拉框选项内容过长 如下图： 解决办法 1.element-ui 的el-select 的下拉框定位它会去判断父级是否有fixed 定位如果有那么下拉框也会是采用fixed 定位，这个时候回去判断浏览器的边框和 el-select 的位置去做定位从而不会超出浏览器。 2. 知道了上面的原理，解决办法就是给父级加fixed 定位，我们只要给父级加 fixed 定位不需要给...
el-cascader组件异步加载数据方法
09-07
el-cascader组件可以通过提供一个`lazy`属性来实现异步加载数据的方法。下面是使用`lazy`属性实现el-cascader组件异步加载数据的示例代码： ```vue <el-cascader :options="options" :props="{ lazy: true, ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

@至尊宝～

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值