el-cascader级联选择器无滚动条

最新推荐文章于 2023-12-25 17:37:57 发布
最新推荐文章于 2023-12-25 17:37:57 发布
阅读量315 收藏
点赞数
文章标签： elementui
原文链接：https://blog.youkuaiyun.com/dream_follower/article/details/105436960
版权

问题：级联选择器无滚动条在这里插入图片描述

原因：组件里面有一个el-crollerbar-wrap类，可以看到它的height是100%。所以会将选择器设置为整页显示，需要将其设置成具体的数值，比如200px

MJJH
关注
vue运用之el-cascader组件
日常笔记/总结/系列知识梳理
11-30 1190
el-cascader 是 Element UI 的级联选择器组件。以下是一些常见的 el-cascader 问题以及对应的案例代码。
Cascader 级联选择（详解）
热门推荐
日常笔记/总结/系列知识梳理
05-24 4万+
Vue.js 是一个渐进式的 JavaScript 框架，被设计用来构建用户界面。与其他重量级框架（如 Angular 或 React）相比，Vue.js 提供了更简单、更灵活的 API，使得你可以在各种项目中灵活使用。
el-cascader级联选择器-数据过多引起高度问题
bushoubu的博客
08-01 1401
el-cascader级联选择器数据过多（超出了屏幕/浏览器高度），会导致高度问题（被屏幕挡住，显示不全）
解决el-cascader级联选择器无滚动条的问题
qq_38250741的博客
09-06 1299
在做el-cascader级联选择器时，会出现以下这种情况 滚动条会消失，原因是因为 这里有一个el-scrollbar_wrap的class属性height设置的是100%,如果将他设置为200px则可以解决这个问题，所以，这里需要给el-scroll_wrap Class一个样式，height为200px ...
Vue电商项目--记录(三)之解决el-cascader级联选择器无滚动条的问题
pakerder的博客
07-03 851
跟着视频做项目的时候，用了el-cascader这个组件，发现出现了这个问题： 视频里并没有这个问题，这就很痛苦了，网上搜了很多，但是没有有效的解决方案，然后我就自己打开了调试工具 里面有一个el-crollerbar-wrap类，可以看到它的height是100%,会有问题，将其设置成具体的数值，比如250px，就可以解决这个问题了。 将这一段代码写到整个项目的全局样式文件里，不要在组件的局部样式表里面写，否则会没有效果...
element ui el-cascader 消除滚动条
liubangbo的专栏
07-06 3730
用el-cascader 组件时出现了滚动条，如下图所示：网上说加上全局样式就可以了（不要加scoped），如下： 试了一下效果如下： 样式生效了，横向滚动条消失了，但效果还是不行，好像还不如之前。看了一下element ui 给级联选择器加的样式，如下：加了style, margin-bottom, margin-right 这个样式就是为了滚动条而设置的，既然不需要滚动条了，这个样式也得把它去掉： 这样就可以了。效果如下： perfect！...
解决：el-select，el-cascader或el-date-picker的下拉框不随滚动条滚动。
qq_38969618的博客
06-22 5989
el-select下拉框不随滚动条滚动
element ui - Cascader 级联选择器 样式
Cyl0110的博客
12-05 1357
使用Cascader未设置样式时，列表高度会占据整个页面 可在全局样式文件中设置高度值 .el-cascader-panel{ height: 210px; } 去掉横向滚动条 .el-scrollbar__wrap{ overflow-x: hidden; } 文章参考与 element ui - Cascader 级联选择器 样式 - STRIVE-PHY - 博客园 感谢博主的分享 ...
Element源码分析系列8-Cascader(级联选择器)
weixin_33836223的博客
08-28 4832
简介 级联选择器，如下图,也是一种常用的组件，这个组件会比较复杂一点 Element中和该组件相关的文件有main.vue和menu.vue2个文件，前者代表输入框部分，后者代表下方的级联选择部分，以及附加的js文件popper.js以及vue.popper.js，用来处理弹出框逻辑，前面文章介绍过，这4个文件总代码量2000行左右，首先要明确，Element中把弹出框的逻辑分离出去了，放在专门...
关于解决ElementUi中select框在页面滚动时el-option超出元素区域的问题+ cascader滚动超出问题
01-25
然而，在实际使用过程中，可能会遇到一些问题，比如Select下拉选项（el-option）在页面滚动时超出元素区域，以及Cascader级联选择器滚动超出其容器。这两个问题都会影响用户体验。本文将详细探讨这两个问题的原因及...
Element UI table组件中的滚动条无效问题
一往直“前”，直上云“端”
07-23 5463
目录 项目场景： 问题描述： 原因分析： 解决方案： 项目场景： 在最近的项目中接触了下拉框与表格数据联动的需求： 通过点击select下拉框节点触发列表渲染，页面初始化时默认选中下拉框中第一个节点并渲染数据。 问题描述： 知识提要：在element-UI中只要在el-table元素中定义了height属性，即可实现固定表头的表格，若数据过多则会产生列表滚动效果。 问题描述：下拉框设置默认选择节点后，绑定表格数据渲染。 在页面初始化时，表格数据渲染出来了，但是列...
element 中添加一个属性就可解决 el-select 和 el-cascader 等下拉项 不随页面滚动问题
IT_iosers的博客
06-27 1528
element 中添加一个属性就可解决 el-select 和 el-cascader 等下拉项 不随页面滚动问题
vant滚动导航不生效（已解决）
qq_52214334的博客
08-03 1447
2.例如，你可以给外层的《div》元素添加一个class，然后在中使用scrollspy属性指定该class作为滚动容器的选择器，如：scrollspy=“.scroll-container”。1.你可以尝试自定义一个滚动容器，并在的scrollspy属性中指定自定义滚动容器的选择器。想要顶上的标签跟随这内容的滑动而改变，我一开始直接引用的官方文档没起作用，问了很久的gpt。
使用element过程中出现的问题及解决方法（1）
接着奏乐接着舞的博客
06-29 2155
主要内容为日常使用饿了么UI过程中犯错和解决方案。ps:以后会更新
＜ element-UI中 el-select组件，下拉时内容无法显示滚动条 ＞
一个平平无奇的技术宅
08-04 2454
在前端开发中，我们会使用到`v-for`循环一些选择类型组件的选项，便于接受后端返回的数据，用于渲染在组件上。 结构较为简单！ 但是当后端数据传回较慢时，或者渲染时，赋值方法有误，可能会导致element组件无法及时重新判断样式，导致组件选择样式有误！...
el-cascader饿了么级联选择器，滚动加载更多数据
weixin_42119356的博客
12-25 1320
1、定义指令：可以在组件内定义cascaderScroll，也可以全局定义指令。注意：定义指令时，要加上如下代码，否则数据渲染后会滑倒最上面一条显示。根据业务需求，需要在左侧红框内实现向下滚动增加更多数据功能。2、使用指令：loadmore方法即为加载更多的逻辑。3、因为我用的懒加载，所以初始的时候要调用一下。3、我用的懒加载，需求是只有第一级分页滚动。方法：通过指令形式实现。
element的级联选择器Cascader无滚动条样式全部显示超出屏幕解决办法
cjxggg的博客
03-13 4468
查了半天在大佬的博客里找到解决办法了, // 在全局的global.css样式中给el-cascader-panel添加高度 .el-cascader-panel{ height: 200px; } 原因在评论区: // 版本不一致造成的，你如果把浏览器窗体缩小显示就能看到整个级联选择器了，它是全部显示出来没有滚动条。强制在全局样式中更改就可以了。在组件内部样式中修改不好用 ...
el-cascader限制高度
最新发布
01-15
### 设置 `el-cascader` 组件的高度限制 为了调整 `el-cascader` 组件的选择面板高度并控制其滚动行为，可以通过自定义 CSS 类来实现这一目标。具体来说，在项目中的全局样式文件（如 `App.vue` 或者项目的公共样式表）中添加特定的样式规则可以有效改变默认的行为。 对于希望设定最大高度并且启用内部滚动的情况，下面的方法能够满足需求： #### 方法一：通过 `.el-cascader-menu` 如果仅需修改单个菜单项的高度，则可以直接针对`.el-cascader-menu`类应用CSS属性: ```css .el-cascader-menu { max-height: 200px; overflow-y: auto; } ``` 这会使得每一个级别的选项列表都具有固定的最高限度，并允许垂直方向上的内容溢出时显示滚动条[^1]。 #### 方法二：整体设置弹层容器大小 当想要统一管理整个下拉框区域尺寸的时候，应该考虑作用于更外层的选择器——即`.el-cascader-panel`及其子元素`.el-scrollbar__wrap`。这样做不仅限定了总高，还优化了滚动体验： ```css /* 定义选择面板的整体高度 */ .el-cascader-panel { height: 315px; } /* 调整滚动条包裹的内容区，防止超出边界 */ .el-scrollbar__wrap { overflow-x: hidden !important; /* 防止水平滚动 */ overflow-y: scroll !important; /* 启用纵向滚动 */ } ``` 上述代码片段确保了即使在多级联动的情况下也能保持良好的用户体验，同时解决了可能出现的布局错乱问题[^4]。 另外值得注意的是，由于Element UI框架本身会对某些DOM结构施加内联样式或其他形式的影响，因此有时可能需要借助浏览器开发者工具实时查看实际渲染后的HTML/CSS情况，以便做出更加精准的微调。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值