elementUI cascader父容器出现滚动条后，级联下拉横向被隐藏

最新推荐文章于 2024-05-22 13:59:56 发布
最新推荐文章于 2024-05-22 13:59:56 发布
阅读量957 收藏 1
点赞数 1
分类专栏： 踩坑 文章标签： elementui 前端 级联下拉选项被隐藏
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/lyn1772671980/article/details/127241598
版权
本文介绍了解决 ElementUI 中 Cascader 组件在父容器出现滚动条时，下拉选项横向被隐藏的问题。通过设置 append-to-body 属性为 false，使组件挂载在 body 上，从而确保下拉选项完全可见。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

elementUI cascader父容器设置overflow:auto出现滚动条后，级联下拉设置:append-to-body="false"时，下拉选项横向被隐藏，如下图所示

 【解决方法】设置cascader 的append-to-body="false"，使其挂在在body上即可显示隐藏部分

【专升本计算机】甘肃省专升本考试公共课计算机填空题考点汇总
「 刘一哥与GIS的故事」
09-04 3267
甘肃专升本考试公共课计算机填空题考点汇总 Excel 工作簿文件的默认扩展名为 xls 。 Excel 主界面窗口中编辑栏上的 “fx” 按钮用来向单元格插入函数。 用来给电子工作表中的行号进行编号的是数字。 在 Excel 中，输入数字作为文本使用时，需要输入作为先导标记的字符是单引号。 电子工作表中每个单元格的默认格式为常规。 假定一个单元格的地址为 D25 ，则此地址的类型是相对地址。 在 Excel 中，假定一个单元格所存入的公式为 “=13*2+7” ，则当该单元格处于编辑状态时显示
ym——android源码大放送（实战开发必备）
热门推荐
陈宇明
08-10 4万+
文件夹 PATH 列表 卷序列号为 000A-8F50 E:. │  javaapk.com文件列表生成工具.bat │  使用说明.txt │  免费下载更多源码.url │  目录列表.txt │   ├─android web应用 │      jqmDemo_static.zip │      jqmMobileDemo-master.zip │      jqmMo
Cascader 级联选择器以及select下拉选框随着页面滑动样式脱离解决方法
mingtian18的博客
11-11 2172
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组件添加属
出现弹框时隐藏底部页面滚动条
bidepanm的博客
06-18 309
有时候，ie浏览器中出现弹框，滚动弹框中的滚动条会影响底部页面 created: function () { // 出现弹框时隐藏底部页面滚动条 document.querySelector('body').addEventListener('click', this.clickCxx, false) }, destroy: function() { document.querySelector('body').removeEventListener('click', this.c
解决鼠标滚动时element-ui下拉框错位的问题
最新发布
锦瑟年华L的博客
05-22 899
解决鼠标滚动时element-ui下拉框错位的问题
el-cascader选择之后隐藏弹框
宁夏前端工程师，马卫斌，wx：1457508895
12-08 973
【代码】el-cascader选择之后隐藏弹框。
element 中添加一个属性就可解决 el-select 和 el-cascader 等下拉项 不随页面滚动问题
IT_iosers的博客
06-27 1552
element 中添加一个属性就可解决 el-select 和 el-cascader 等下拉项 不随页面滚动问题
el-scrollbar隐藏横向滚动条以及消除el-select和el-cascader的影响
qq_44741577的博客
02-24 469
el-scrollbar隐藏横向滚动条以及消除el-select和el-cascader的影响。
element ui - Cascader 级联选择器 样式
Cyl0110的博客
12-05 1382
使用Cascader未设置样式时，列表高度会占据整个页面 可在全局样式文件中设置高度值 .el-cascader-panel{ height: 210px; } 去掉横向滚动条 .el-scrollbar__wrap{ overflow-x: hidden; } 文章参考与 element ui - Cascader 级联选择器 样式 - STRIVE-PHY - 博客园 感谢博主的分享 ...
关于解决ElementUi中select框在页面滚动时el-option超出元素区域的问题+ cascader滚动超出问题
01-25
然而，在实际使用过程中，可能会遇到一些问题，比如Select下拉选项（el-option）在页面滚动时超出元素区域，以及Cascader级联选择器滚动超出其容器。这两个问题都会影响用户体验。本文将详细探讨这两个问题的原因及...
extjs中滚动条属性_ExtJs控件属性配置详细
weixin_39974932的博客
12-19 733
序言：1.本文摘自网络，看控件命名像是4.0以前的版本，但控件属性配置仍然可以借鉴(不足之处，以后项目用到时再续完善)。Ext.form.TimeField:配置项：maxValue：列表中允许的最大时间maxText：当时间大于最大值时的错误提示信息minValue：列表中允许的最小时间minText：当时间小于最小值时的错误提示信息increment：两个相邻选项间的时间间隔，默认为15分钟f...
element 全屏时下拉框不显示下拉数据的问题
qq_42836879的博客
07-10 2878
element 全屏时下拉框不显示下拉数据的问题关于使用element组件select过程中，全屏下不显示下拉列表 关于使用element组件select过程中，全屏下不显示下拉列表 解决方法:添加:popper-append-to-body="false"属性 问题原因：默认将弹出框插入至 body 元素。当设置了某个元素全屏时，会遮挡住原来的select下拉数据。 官网答疑： ...
el-cascader宽度限制，超出显示滚动条
九亿宅男的梦的博客
02-22 2728
【代码】el-cascader宽度限制，超出显示滚动条。
vue-fullscreen全屏下elementui 日期下拉框 不出来，非全屏，下拉框可以出来，全屏下拉框不出来（发版）
qq_32758159的博客
11-04 4910
vue-fullscreen全屏下elementui 日期下拉框 不出来 问题：非全屏，下拉框可以出来，全屏下拉框不出来 1.解决思路：上网查后，下拉框不要放入body中可以解决，搜一个属性，让下拉框不放入body https://blog.youkuaiyun.com/qq_42907330/article/details/109290894?utm_medium=distribute.pc_relevant.none-task-blog-2defaultbaidujs_title~default-0.essearc
elementUI——select组件下拉弹窗位置问题——css样式问题
yehaocheng520的博客
10-27 5415
今天，测试提了一个bug给我，页面如下： 发起EQ弹窗中的问题是一个
el-Cascader联级弹框的显示被el-dialog覆盖（z-index导致）
qq_51720257的博客
04-06 1072
el-Cascader联级弹框的显示被el-dialog覆盖（z-index导致）
在使用select下拉选框时，如果全屏后或者复用组件时不显示的解决方法
lllkkkg的博客
04-26 1342
我在首页做了一个点击事件会出现遮罩层，此时上面会覆盖一个弹出框，而里面在复用组件<registerlog class="register-log"/>时，组件里面的select下拉选框点击没有生效 <div class="all"> <!-- 遮罩层 --> <!-- 注册登录遮罩层 --> <div class="mask" v-show="maskShow" @click="setMaskShow"></div
el-cascader饿了么级联选择器，滚动加载更多数据
g229191727的博客
01-11 2753
如图示，根据业务需求，需要在左侧红框内实现向下滚动增加更多数据功能 。 方法：通过指令形式实现 1/定义指令：可以在组件内定义cascaderScroll，也可以全局定义指令 directives: { "cascaderScroll": function (el, binding) { const cascaderDom = el.querySelector( ".el-cascader__dropdown .el-cascader-menu..
el-select 隐藏下拉列表，点击时自定义获取数据并可多选
m0_59791667的博客
07-15 3984
绑定ref在focus方法里面加上this.$refs.selectHeadEmpId.blur()即可隐藏下拉框。后，只要点击到了select，就会触发相应事件，并且可以配合。事件来禁止select。
掌握jQuery页面交互与效果实现教程下载
2. **级联下拉框效果**：这部分内容可能介绍了如何使用jQuery实现级联下拉列表，即一个下拉列表的选项会根据另一个下拉列表的选择发生变化。 3. **横向纵向菜单**：这个文件可能包含代码示例和说明，指导如何创建...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

麦兜_冰夕

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

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

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

打赏作者

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

抵扣说明：

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

余额充值