Element UI 2.13.2版本 级联Cascader一级菜单响应数据足够多时高度铺满全屏，导致二级菜单无法选择

最新推荐文章于 2023-07-11 18:02:38 发布
最新推荐文章于 2023-07-11 18:02:38 发布
阅读量448 收藏
点赞数 1
分类专栏： 2020.07
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39429811/article/details/107623218
版权

响应的数据一级菜单30个时
在这里插入图片描述
界面图
在这里插入图片描述

一级菜单响应了30个数据，导致铺满了全屏，多出的部分隐藏掉了。即当前一级菜单某一选项对应的二级菜单只有1-10个，对应的二级菜单显示在超出的范围内，无法选择。

解决方法
控制el-cascader下的下拉选项el-cascader-panel的高度，可以在当前vue文件下的style代码块或全局代码(global.css)添加如下代码

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

修改完后的图

在这里插入图片描述

吴彦希
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
element-ui-2.13.2版本
10-23
element-ui全部资源包2.13.2版本,是在unpkg上用爬虫爬下来的，所有资源文件都在里面一个不少
element ui中级联选择器不能滚动，全部显示的问题
Julyyy_的博客
08-22 644
value: 与v-model中的双向绑定挂钩，这里如果绑定了cat_id那么v-model中绑定的就是id指，value就是选中的分类的代名词;今天做项目时发现element ui中的级联选择器不能滚动显示，而是占满整个屏幕，并且最上面的几条数据看不见。v-model:将选中的id的值双向绑定到对应的数组中selectedCateKeys;options: 指定数据源，在data中应有对应的数组catelist；props: 配置选项对象,在data中应有对应的对象cateProps;
vue element中Cascader 级联选择器高度占满浏览器的问题
Zero
11-02 332
在全局样式文件global.css中添加高度配置即可解决： /* 解决下拉框下拉列表占满全屏的BUG */ .el-cascader-panel{ height: 200px; }
ElementUI中的级联选择框cascader显示不全占满浏览器的问题
厚积薄发
03-29 2273
在ElementUI的2.13.0版本中直接引入级联选择框cascader在浏览器中显示异常，数据过多时级联选择框弹出来的panel高度占满浏览器，为解决此问题只需要在global.css中添加.el-cascader-panel{ height: xxxpx }即可解决此问题。 ...
vue element 多选下拉框内容过长显示‘...’ 鼠标悬浮显示全部
m0_48317876的博客
06-13 4975
element 多选下拉框过长显示省略号，鼠标悬浮显示全部内容
vue element el-Cascader 级联选择器 收起二级菜单的问题解决办法详解
热门推荐
@必意玲
09-19 1万+
最近做项目经常用到 el-Cascader 这个级联选择器，也是踩过好过坑，这里记录下自己踩的坑。 先说一下问题： 当在鼠标移动到 组件 位置触发子菜单后，再移动到 指南 位置，但是 组件 的子级菜单并没有收起 ，如此移来移去，让人感觉就像是 指南 下面有子级菜单，其实指南并没有子级菜单。 1. 总结一句话：移到父菜单 相应子菜单出现 没有子菜单 则所有子菜单消失 2. 解决办法 通过 slo...
element-ui 二级联动 选择器 无法选择 或者 显示错误 异常
yssa1125001的博客
05-18 1225
刚开始的配制如下： <el-form-item label="所属分类"> <el-select v-model="courseInfo.subjectParentId" @change="firstChange" placeholder="请选择一级分类"> <el-option v-for="item in oneList" :key="item.id" .
element中级联选择器（多选），第一级和二级去掉多选框，只有第三级多选
ccsundhine的博客
04-28 7969
css搞定 .el-cascader-panel { .el-scrollbar:first-child { .el-checkbox { display: none; } } .el-scrollbar:nth-child(2) { .el-checkbox { display: none; } } }
ElementUI中Cascader 级联选择器高度占满浏览器的问题
weixin_44226088的博客
09-03 579
今天在做项目练习时 发现当数据较多时 Cascader 级联选择器显示不全 且与浏览器等高 查阅文档所知 在全局样式文件global.css中添加高度配置即可解决： 下面展示一些 内联代码片。 .el-cascader-panel{ height: 200px; } ...
el-cascader-panel级联面板
weixin_53917307的博客
03-29 3483
1、菜单收起 鼠标离开面板收起 .el-cascader-panel.is-bordered { border: 0; &:hover { .el-scrollbar.el-cascader-menu:nth-child(2), .el-scrollbar.el-cascader-menu:nth-child(3) { display: inline; } } .el-scrollbar.el-...
【总】设置el-cascader级联结构为2级时，只有第2级可勾选且点击label就可选中，且绑定值直接为第2级id数据。(popper-class属性可用来区分多个级联)
qq_38969618的博客
05-20 7780
popper-class属性、css相关设置
element-ui 2.13.2
10-07
前端开发element-ui离线文档2.13.2版本前端开发element-ui离线文档2.13.2版本
element-ui@2.13.2.rar
05-29
element-ui@2.13.2.rar,网上没有合适的，折腾了半天才弄下来，给大家分享一下，方便方便
Element网站快速成型工具 v2.13.2
09-28
为您提供Element网站快速成型工具下载，Element是一套为开发者、设计师和产品经理准备的基于Vue 2.0的组件库，提供了配套设计资源，帮助你的网站快速成型。由饿了么公司前端团队开源。Element特性：1、一致性 ...
element-hl:基于elementui 2.13.2修改了部分源码的版本
03-23
基于element ui 2.13.2版本链接文件安装npm install element-ui -S特别感谢元素ui团队执照1.0.0桌子修改表格scrollEvent增加了一个表格的滚动外部事件tableBodyScroll table模块：增加了一个noCalcScrollX：控制是否...
奇葩功能实现：级联选择框组件el-cascader实现同一级的二级只能单选，但是一级可以多选
最新发布
yorcentroll的博客
07-11 5158
但是其实还有一个小问题，那就是用户还是能看到面板闪了一下的，因为被关闭了又打开了一次。 但是本人已经不想折腾， 谁有本事谁来解决这个问题。希望有大神看到最后，能伸出援手，给出更完美的方案，谢谢！
el-cascader级联选择器实现一级二级单选三级多选，选中未显示
MISS_zhang_0110的博客
05-05 3626
【代码】el-cascader级联选择器实现一级二级单选三级多选，选中未显示。
element-ui layout布局 铺满整个空间方法
weixin_47970316的博客
12-14 3639
element-ui 布局铺满整个空间方法
Cascader 级联选择器编辑之后展开时显示多个层级的问题的三种解决方案
小白的博客
07-08 2699
代码： 二、强制性暴力操作DOM 使用v-if 当级联选择器在对话框el-dialog中使用时直接使用elementUI中自带的属性 destroy-on-close
element-ui2.13.2升级到element-ui 2.15.6的差异
04-29
升级 Element UI 版本时，需要注意以下几点： 1. 语法变化 在 Element UI 2.15.6 中，某些语法有所变化，需要进行调整。例如，原来使用 `$attrs` 访问组件的非 prop 特性，现在应改用 `$attrs` 对象的 `...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值