[Element] 级联控件el-cascader菜单高度过高问题的解决办法

最新推荐文章于 2026-06-08 18:58:25 发布
原创 最新推荐文章于 2026-06-08 18:58:25 发布 · 1.6k 阅读 · 1 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
收录于
error

当前文章被收录于：

error
5 篇文章 0 人学习
订阅专栏 查看详情
element ui

当前文章被收录于：

element ui
1 篇文章 0 人学习
订阅专栏 查看详情
在使用Element UI的级联控件el-cascader时遇到菜单显示过高，影响了界面美观。通过全局CSS样式设置`.el-cascader-menu`的高度为300px，成功解决了这一问题，使得菜单高度得到控制，改善了用户体验。

使用Element 的级联控件el-cascader时，出现菜单高度过高的问题，效果如下：
在这里插入图片描述
【解决】
可以为菜单栏全局设置一个高度

.el-cascader-menu {
    height: 300px;
}

重新查看效果，效果如下：
在这里插入图片描述

标签
#elementui #vue.js
【高清照片】深圳光博会看PCIe Over Fibre 实现方案
Saniffer的博客
09-16 1320
本文分析了PCIe over Fibre技术及其在数据中心的应用前景。该技术通过光纤延伸PCIe总线，解决了传统铜缆距离限制问题，支持跨机架资源池化。目前主要有两种实现方式：CDFP混合光缆方案和Retimer转接卡方案，各有优缺点。文章还探讨了CDFP接口的现状、低速信号传输解决方案，以及PCIe速率与光通信发展的对应关系。最后对比了PCIe光缆与以太网光缆的关键差异，指出PCIe光互连在协议透明度和边带信号处理上的特殊要求。随着标准推进，PCIe over Fibre将成为数据中心扩展高带宽、低时延互连
SAP Integration Suite 与 SAP Cloud Integration 的关系解析
2007 年 ~ 2025 年，深耕 SAP 技术 18 年
12-01 556
SAP Cloud Integration是SAP Integration Suite套件的核心组件，专注于消息与流程集成。两者关系可概括为：Integration Suite是SAP BTP上的集成平台套件（iPaaS），而Cloud Integration是其中负责应用与B2B集成的关键能力。日常所说的"CPI"实际指代的是Integration Suite中的Cloud Integration功能。该套件还包含API管理、事件网格等其他集成能力，共同构成企业集成解决方案。理解这一层
element ui Cascader 级联选择器自定义高度
宁
06-21 1113
Cascader高度过高，自定义高度样式
智能家居：从智慧节能到接管生活.pdf
智能家居：从智慧节能到接管生活.pdf
el-cascader设置高度
weixin_35756373的博客
01-05 2009
el-cascader是一个用于Vue.js的组件，你可以使用CSS来设置它的高度。例如： .el-cascader { height: 200px; } 如果你想要设置单个选项的高度，你可以这样做： .el-cascader__item { height: 30px; } 注意，你需要在你的Vue.js组件的样式中使用这些CSS规则，或者在全局样式文件中使用它们。 ...
vue 限制 el-cascader 的高度和宽度
岁月流熵，用理智/秩序构建堡垒留存我们的光芒
11-14 5301
element里面的el-cascader组件宽度限制_el-cascader 宽度_丹丹的小跟班的博客-CSDN博客。当选择项字符过长时，下拉框会自动变长，有时甚至会超出屏幕宽度，影响使用。当选择项过多时，选择器的长度会突破屏幕高度，会导致无法查看相应选择项。优化方案：添加 el-tooltip 组件对被遮挡的内容进行显示。/* 改变级联选择器的最大高度 *//* 改变级联选择器的最大宽度 */解决方法：限制选择器的高度。解决方法：限制选择器的宽度。
Python通达信数据读取终极指南：3个核心功能快速掌握金融分析
最新发布
gitblog_00089的博客
06-08 555
还在为金融数据分析寻找高效的数据源吗？mootdx作为一款纯Python开发的通达信数据读取接口，为你提供了简单、快速、免费的金融数据获取方案。这个Python金融数据分析工具能够轻松获取A股、港股、期货等市场数据，为你的投资决策提供有力支持。无论你是量化交易新手还是数据分析专家，mootdx都能帮你轻松读取本地通达信数据文件或连接远程行情服务器。 ## 📈 项目核心价值：为什么选择mootd
Element中的 el-cascader高度解决办法
qq_41263217的博客
09-08 5055
Element中的 el-cascader 用法 <!-- options 数据源 --> <!-- v-model 选中的value --> <!-- props 展示的表达式 label value children --> <!-- change 选中改变的方法--> <!-- clearable 小xx一键清除--> <!-- change-on-select 可以选中任意级别（默认只能选中最后一个级别）--> <el-
【element-ui 级联选择器调节高度 el-cascader】
weixin_43584297的博客
08-01 2052
important 否则CSS不生效。调节高度 需要在 App.vue中加入一下样式。
element中的Cascader 级联选择器自定义高度显示
weixin_57971171的博客
03-29 848
【代码】element中的Cascader 级联选择器自定义高度显示。
解决Element 的 el-cascader高度问题
qq_52680057的博客
03-11 3845
原代码： <el-cascader style="width:170px;" :options="shopList" :props="shopListProps" clearable :show-all-l...
el-cascader级联选择器-数据过多引起高度问题
bushoubu的博客
08-01 1687
el-cascader级联选择器数据过多（超出了屏幕/浏览器高度），会导致高度问题（被屏幕挡住，显示不全）
解决 Element UI 组件下的 Cascader 高度过高问题
Huang58_com的博客
05-24 4247
Cascader 级联选择器的高度过高问题解决当我们在使用级联选择器时由于`data`中的 `options` 循环项过多时，级联选择器的高度被撑满全屏 解决当我们在使用级联选择器时由于data中的 options 循环项过多时，级联选择器的高度被撑满全屏 看一下当时代码 <div class="block"> <el-cascader v-model="value" :options="options" :props="{ expandTrigger
修改 el-cascader级联下拉框高度
weixin_41463944的博客
11-11 2872
.el-scrollbar__wrap { height: 70vh; }
el-cascader高度溢出问题
不是志锋的博客
06-03 2185
在复现黑马某项目中，Cascader 级联选择器出现了这样的高度问题 高度不能自适应，可以在全局的css里面添加 .el-cascader-menu { height: 300px; width: 100%; } 添加后： 搞定
element-ui ：Cascader级联选择器相关问题
qq_49575831的博客
02-22 1577
element新版本级联选择器高度问题、去掉单选框、点击文字关闭。
vue中使用element-ui ，设置级联选择器高度问题
fallsTheDust的博客
05-06 4370
一、前言 我本来以为设置elemnt-ui组件样式需要用到深度选择器，然后找了好多关于深度选择器的，比如>>> /deep/ ::v-deep 后来才明白是权重不够，解决方法如下 二、设置高度方法 1、在全局css中设置 .el-cascader-menu{ height: 400px; } 缺点：所有级联选择器的高度都是固定的 结论：只有在所有页面级联选择器都一致的情况下或者只有一个级联选择器情况下使用这种方法 2、在使用级联选择器的页面单独设置 <style
Cascader级联选择器自定义高度
M40153c的博客
08-05 1378
Cascader级联选择器自定义高度
vue element Cascader 高度过长问题
Qiuer2的博客
07-20 1383
Cascader 高度过长问题解决方案 // 可以在全局的公共 css 样式中设置为 .el-cascader-panel 添加固定高度 .el-cascader-panel { height: 300px; } 通过加了固定高度就可以恢复正常 一个小坑
关于elementUI中Cascader 级联选择器高度超过屏幕的问题
weixin_69943276的博客
08-31 1252
在elementUI中直接使用Cascader 级联选择器效果跟组件库不一样，数据过多导致菜单选择部分超出了页面，前面的数据没办法看到从而导致了没办法选择。从网上找到了以下解决办法，发布此篇文章只是为了方便自己翻阅。在公共初始化的css样式文件中添加以下代码即可解决。...
修改使el-cascader组件选择内容时不撑高的方法
weixin_58785499的博客
03-12 1349
其中的el-tag的样式position，如果不加，则清空属性不好使，很难点中，而input的样式，则主要在选中一条数据，即框内未被占满时，有用，如果不添加input的样式，则当只选中一条数据时，很难清空。这边使用了max-width属性，而不是使用margin-right:60px，是因为使用margin-right:60px会造成clearable清空很难点中。通过上述的这些代码，即可使el-cascader组件在视觉效果与其他组件一致，在操作上与未修改时一致了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值