2021-01-16

最新推荐文章于 2024-03-29 13:56:50 发布
最新推荐文章于 2024-03-29 13:56:50 发布
阅读量1.2k 收藏 1
点赞数 3
分类专栏： vue/element ui Cascader 级联选择器 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/NULIHUAHUA/article/details/112725817
版权
在Vue项目中使用ElementUI的Cascader组件时遇到级联面板高度过高且无滚动条的显示问题。通过调试发现面板缺少高度设置。为解决此问题，只需为级联面板设定一个固定的高度，并在样式中使用！important提高权重。这样做使级联面板看起来更加整洁舒适。
摘要由CSDN通过智能技术生成

解决Cascader 级联选择器中级联面板高度过高/没有滚动条的问题

最近在学做一个Vue项目，其中用到element UI组件中的cascader级联选择器，出现了一点点小问题，如下：
花
红色框起来的地方叫级联面板，由于数据很多而面板中没有滚动条，所以很高很丑。通过调试，找到这个面板所在的盒子位置，如下图：
在这里插入图片描述
可以发现，此时的级联面板并没有设置高度，所以只要设定一个固定的高度就可以解决问题！！！
在这里插入图片描述
呐！！！是不是顺眼多了、舒服多了！！！
在这里插入图片描述
在这里插入图片描述
注意：我是在单文件组件中设置样式的，所以加上了！important来提高权重，你也可以选择在全局样式中给面板设置高度。

第3课 桐桐查单词(scanwords)-2021-01-16.pdf
01-18
根据给定文件的信息，我们可以提炼出以下IT领域的关键知识点： ### 1. 问题背景与描述 本课程针对的是一个具体的问题场景：“桐桐查单词”任务，即桐桐需要将一篇英语文章翻译成中文。为了完成这项工作，桐桐需要...
Elementui级联选择器的选择框的高度溢出，同浏览器高度一样解决方案
weixin_45392774的博客
09-23 602
在做项目过程中，发现Cascader 级联选择器的选择框的高度溢出和浏览器等高，和预期效果不一样 解决方案：在全局样式中给级联选择器的菜单指定一个高度值： 注意：刚开始用.el-cascader{ height: 300px; }测试不成功，改成.el-cascader-menu/panel{ height: 300px; }就可以了 .el-cascader-menu { height: 300px; } ...
element的级联选择器Cascader无滚动条样式全部显示超出屏幕解决办法
cjxggg的博客
03-13 4395
查了半天在大佬的博客里找到解决办法了, // 在全局的global.css样式中给el-cascader-panel添加高度 .el-cascader-panel{ height: 200px; } 原因在评论区: // 版本不一致造成的，你如果把浏览器窗体缩小显示就能看到整个级联选择器了，它是全部显示出来没有滚动条。强制在全局样式中更改就可以了。在组件内部样式中修改不好用 ...
element中的Cascader 级联选择器自定义高度显示
最新发布
weixin_57971171的博客
03-29 433
【代码】element中的Cascader 级联选择器自定义高度显示。
vue 限制 el-cascader 的高度和宽度
岁月流熵，用理智/秩序构建堡垒留存我们的光芒
11-14 3507
element里面的el-cascader组件宽度限制_el-cascader 宽度_丹丹的小跟班的博客-CSDN博客。当选择项字符过长时，下拉框会自动变长，有时甚至会超出屏幕宽度，影响使用。当选择项过多时，选择器的长度会突破屏幕高度，会导致无法查看相应选择项。优化方案：添加 el-tooltip 组件对被遮挡的内容进行显示。/* 改变级联选择器的最大高度 *//* 改变级联选择器的最大宽度 */解决方法：限制选择器的高度。解决方法：限制选择器的宽度。
element cascader级联选择器内容高度问题
qq_52912134的博客
01-15 285
全局样式添加： .el-cascader-menu__wrap { height: 300px; }
element级联选择器高度设置
qq_43295866的博客
05-27 3009
我借助element里面的级联选择器来帮我进行搜索多选，级联选择器成功之后发现高度太低了 所以手动设置了el-cascader-menu__wrap的高度， .el-cascader-menu__wrap { height: 400px; } 效果如下：
element-UI中级联选择器cascader的问题及解决
ss15363380815的博客
09-22 1816
-使用新版的cascader，通过官网的代码进行修改 <el-cascader :options="parentCateList" :props="{ expandTrigger: 'hover', value: 'cat_id', label: 'cat_name', children: 'children', checkStrictly: true }" v-model="selectedKeys" @change="parentCa
el-cascader高度溢出问题
不是志锋的博客
06-03 2028
在复现黑马某项目中，Cascader 级联选择器出现了这样的高度问题 高度不能自适应，可以在全局的css里面添加 .el-cascader-menu { height: 300px; width: 100%; } 添加后： 搞定
element新版本级联选择器高度问题
weixin_44399953的博客
08-19 547
element新版本级联选择器下拉框估计忘设高度了吧，当循环数据过多时，下拉框很长。 解决方法：在全局样式中设置 .el-cascader-menu { height: 300px; }
el-cascader级联选择器-数据过多引起高度问题
bushoubu的博客
08-01 1230
el-cascader级联选择器数据过多（超出了屏幕/浏览器高度），会导致高度问题（被屏幕挡住，显示不全）
lindexi#lindexi#2021-01-16-PowerShell-实现-curl-的用户名和密码逻辑1
07-25
title: "PowerShell 实现 curl 的用户名和密码逻辑"在使用 curl 时，可以采用 -u 加上用户名和密码，这个对应在 PowerShel
解决Element-UI Cascader 级联选择器由于高度问题导致出现空白页的bug
sinat_33127389的博客
09-27 501
记录一下element-ui级联选择器由于高度问题导致出现空白页的bug。 在项目中引入Cascader 级联选择器 <el-cascader clearable v-model="selectedKeys" //list为Array类型包含两级数据，获取到的一级数据有30条 :options="list" //props配置对象设置expandTrigger，value，label，children等属性 :props="props" ></e
Cascader级联选择器的优化（高度优化+选择任意级优化）
malone66的博客
08-14 1209
elementui版本：2.15.5 1.解决高度问题 在引入cascader级联选择器后，会导致整个级联选择器高度占满页面的情况，我们只需在全局样式中加上如下代码固定下高度即可 /*解决高度太高的问题*/ .el-scrollbar__wrap { height: 300px; } 2.如果想使选择器能够选择任意一级的选项，则需要进行如下操作： 首先在级联选择器的配置项中添加如下一行代码，使其能够选择任意一项 checkStrictly: true 此时添加完后却又出现了另一.
element-ui ：Cascader级联选择器相关问题
qq_49575831的博客
02-22 1248
element新版本级联选择器高度问题、去掉单选框、点击文字关闭。
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值