el-cascader级联选择器-数据过多引起高度问题

最新推荐文章于 2024-07-21 19:19:15 发布
最新推荐文章于 2024-07-21 19:19:15 发布
阅读量1.1k 收藏 2
点赞数 1
文章标签： html 前端 elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/bushoubu/article/details/126106374
版权
当从后台加载的数据超出屏幕高度时，会导致页面内容显示不全。可以尝试两种解决方案：一是直接在CSS中设定.el-cascader-panel的高度；二是使用Vue中的ref属性来动态调整组件高度。但后者可能需要避免scope限制。
摘要由CSDN通过智能技术生成

想要的效果是这样，能显示全部

 

 但是由于从后台加载的数据过多（超出了屏幕/浏览器高度），会导致高度问题（被屏幕挡住，显示不全）

解决办法

一、简单的方法是在css中给.el-cascader-panel设置height为固定高度（单位px）

二、如果style加了scope属性等限制的话，第一个方法可能就不成功。在vue中可以用另一个方法：前提是给el-cascader注册ref名

 

 

bushoubu
关注
vue3 - element-plus组件库el-cascader级联选择器，“动态数据懒加载+回显/编辑时自动选中对应节点“ 问题，多选复选框、单选框级联选择器如何让数据回显？数据是动态加载回显咋办
高级前端工程师
06-28 2011
elementPlus，vue3，element plus el-cascader 回显，级联选择器，回显，懒加载，el-cascader 动态加载选项、编辑时数据回显问题 、单选不加载下一级节点，级联选择器动态懒加载以及回显，解决el-cascader回显失败问题，三级联动数据回显，省市区回显，el-cascader 动态加载，编辑时数据回显，Element-plus Cascader级联选择器动态加载模式下数据回显时的问题，el-cascader列表是动态的怎么回显，赋值后，不回显怎么办，数据还没加载怎
解决el-cascader级联选择器无滚动条的问题
qq_38250741的博客
09-06 1224
在做el-cascader级联选择器时，会出现以下这种情况 滚动条会消失，原因是因为 这里有一个el-scrollbar_wrap的class属性height设置的是100%,如果将他设置为200px则可以解决这个问题，所以，这里需要给el-scroll_wrap Class一个样式，height为200px ...
关于级联选择器Cascader数据太多会改变列表大小的问题
CLde13的博客
08-01 929
关于级联选择器Cascader数据太多会改变列表大小的问题
elementui的Cascader 级联选择器多选后回显问题
最新发布
一个UI、前端爱好者。
07-21 1321
要在 Element UI 的 Cascader 组件中实现多选后根据选中的最后一级的多个 id 回显选中项，你可以使用 Cascader 组件的。属性来设置选中的值。存储了最后一级的多个 id。当点击“回显选中项”按钮时，// 根据选中的最后一级的多个 id 设置选中的值。// 开启该属性使级联选择不限制必须选中父级。// 假设这些是选中的最后一级的 id。，从而实现级联选择器的回显功能。，以适应不同的数据结构和选中项。你可以根据具体的需求调整。// 用于存储选中的值。
（elementUI）el-cascader级联多选，高宽样式的处理（一行显示）
weixin_46521720的博客
02-08 1万+
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar
关于Vue中涉及到大量数据的级联菜单树状结构的数据多选勾选页面卡顿卡死问题
qq_38828542的博客
07-17 357
提示：放弃el-cascader,改用select + tree来实现，放弃element，改用原生tree配合el-select。本人使用的vue2.x，查看文档属性方法，灵活更加需求写逻辑，目标是不卡死页面。
关于elementUI中Cascader 级联选择器高度超过屏幕的问题
weixin_69943276的博客
08-31 948
在elementUI中直接使用Cascader 级联选择器效果跟组件库不一样，数据过多导致菜单选择部分超出了页面，前面的数据没办法看到从而导致了没办法选择。从网上找到了以下解决办法，发布此篇文章只是为了方便自己翻阅。在公共初始化的css样式文件中添加以下代码即可解决。...
el-cascader 级联选择器动态加载数据及回显数据方法（最全概括）＜grootbaby＞
热门推荐
grootbaby
07-16 1万+
当地区数据比较多时，全部获取数据速度太慢，体验不太好，改为懒加载，一级一级选择地区就能很好避免速度慢的问题。首次加载第一级数据，给出所需要的参数，因为首次加载 node.value 没有值，据此判断是不是第一级数据。当点击最后一级的时候 label 后面不会转圈圈，并把相关值赋值到选择器上。编辑弹窗展示的时候，有时候并不能正确回显，取消展示或者改变 key 值。依次类推，拿到全部层级的 code 和 name 传给后端接收使用。获取倒数第二级的数据的 name。获取倒数第三级的数据的 name。
el-cascader 级联选择器 编辑 回显数据
梁小茹的博客
12-23 3854
直接看代码把 都有注释噢 这个是没有子级children 的 只有父级 他是通过v-model 绑定id 值 来回显数据 carList：是循环的数据 props：是你要显示的数据 名字 id <el-form-item label="驾驶车辆" :label-width="formLabelWidth" prop="vehicleId" > &.
el-cascader 级联选择器 数据为空显示问题
King Saj
12-22 2486
问题描述: 接口请求完数据,出现如下效果,排查发现当最后一级children:[],为空导致这种请求 解决办法: 使用递归处理数据,去除children:[]为空的属性,即可 1: 创建文件 @/utils/treeData html结构 el-cascader配置 <el-cascader class="mb10 mt10" v-model="deptOptions" clearable fi
Element中的Cascader 级联选择器高度问题解决方案
King Saj
02-27 1739
在你的全局global.css里面添加 .el-cascader-menu { height: 300px; }
el-cascader设置高度
weixin_35756373的博客
01-05 1546
el-cascader是一个用于Vue.js的组件，你可以使用CSS来设置它的高度。例如： .el-cascader { height: 200px; } 如果你想要设置单个选项的高度，你可以这样做： .el-cascader__item { height: 30px; } 注意，你需要在你的Vue.js组件的样式中使用这些CSS规则，或者在全局样式文件中使用它们。 ...
修改使el-cascader组件选择内容时不撑高的方法
weixin_58785499的博客
03-12 639
其中的el-tag的样式position，如果不加，则清空属性不好使，很难点中，而input的样式，则主要在选中一条数据，即框内未被占满时，有用，如果不添加input的样式，则当只选中一条数据时，很难清空。这边使用了max-width属性，而不是使用margin-right:60px，是因为使用margin-right:60px会造成clearable清空很难点中。通过上述的这些代码，即可使el-cascader组件在视觉效果与其他组件一致，在操作上与未修改时一致了。
【element-ui 级联选择器调节高度 el-cascader】
weixin_43584297的博客
08-01 1328
important 否则CSS不生效。调节高度 需要在 App.vue中加入一下样式。
element ui Cascader 级联选择器自定义高度
宁
06-21 819
Cascader高度过高，自定义高度样式
el-select多选文字过长导致溢出
yy_demo的博客
04-26 924
出现如上情况时，可以如下修改一下样式，max-width的大小可以根据你输入框的实际长度修改。
element ui 联选择器多选 回显
qq_35556763的博客
10-27 873
当数据是三级联动的时候，有很多数据需要做回显。后端只需要返回最后一层的id，和三级联动的所有数据，即可完成回显
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值