Cascader 级联选择器 出现空面板的问题

最新推荐文章于 2024-10-26 17:40:06 发布
原创 最新推荐文章于 2024-10-26 17:40:06 发布 · 3.1k 阅读 · 3 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue #element #el-cascader

本文介绍了一种解决前端界面中出现空白面板的方法。当后台返回的数据中children属性为一个空数组时，会导致界面显示异常。通过递归处理数据，在children为空时将其赋值为undefined，可以有效解决此问题。

出现空白面板是因为后台大佬数据是递归处理过，最底层的children是个空数组，后台大佬又去不掉或者做不了处理，说特麻烦，那前端做下就好了。

获取数据的时候 前端将数据做个递归处理，遇到children为空的时候赋值undefined，就可以解决这个问题。

处理后界面

vant v2 版本 van-cascader实现部分选项禁用
qq_41537593的博客
06-07 1169
vant2的van-cascader实现部分选项禁用。 存储一个不可选择的id数组，自定义van-cascader的option，判断当前option的id属于不可选择的时候，设置禁用样式，同时在@finish拦截关闭和选择赋值事件。/*隐藏选择的 √ */有问题可评论或私信。
Cascader 级联选择器 - 选择器最后一级数据为空
ioncannontic的博客
04-13 408
Cascader 级联选择器 - 选择器最后一级数据为空
Vant级联选择省市区数据[源码]
最新发布
11-24
本文提供了Vant中Cascader级联选择组件所需的省市区JSON数据，涵盖了全国各省、自治区、直辖市及其下属的市、区、县信息。数据以层级结构组织，每个地区包含value和text字段，便于前端开发者在项目中使用。该JSON数据可直接用于Vant的Cascader组件，实现地区选择功能，适用于表单填写、地址选择等场景。数据全面且结构清晰，为开发者节省了手动整理地区数据的时间。
解决element-ui中级联选择器(Cascader)出现空白选项的bug
ybx18046048113的博客
06-20 720
前端是根据children来进行级联显示的，后端对象中的children属性增加注解。
vant组件--日历组件van-calendar初始化显示空白，滑动一下屏幕才显示（ios系统出现的问题）
qq_48499167的博客
06-29 1899
日历组件van-calendar初始化显示空白，滑动一下屏幕才显示（ios系统出现的问题）
解决vue2+element使用cascader时children为空时，最后一级显示无数据问题
weixin_47299259的博客
10-26 757
思路：使用递归把children为空改为undefined。
Vue使用Element的级联选择器Cascader出现空白面板
小钻风的博客
08-20 2433
最近使用Vue写项目，有用到Element的级联选择器<el-cascader> 由于后台给的数据，不是太符合级联选择器数据的规范，比如children为空时，级联选择器会出现空白的面板，又比如给的是text而不是label，如果直接使用，不会显示文字，我也是找了很久，自己试了很久，才找到一种解决办法的。 在Element-UI是的级联选择器中，只有children这个子节点，即使children: []，也会出现一个面板，就是图中的这个，为了去除这种空白的面板，需要对数据进行处理。 下面这
ElementUI Form：Cascader 级联选择器
ChinaDragon10的博客
02-17 2022
ElementUI Form：Cascader 级联选择器
el-cascader级联选择器遇到的问题！
qq_40273408的博客
02-20 1639
我遇到的问题如下图所示： 当选择级联选择器是，所有选项都显示出来了。 检查数据没有问题，代码也没有问题，见下图： 然后，我从控制台，查看到级联菜单的定位属性： { position: fixed; top: -465px; left: 240px; z-index: 2061; } 从此处看可知，只要修改对应的高度属性，应该就能解决问题，同时在网上也看到了大神相...
element-UI的 Cascader 级联选择器 动态加载数据及回显
weixin_45730243的博客
06-20 4704
要回显，那么第一级要有数据，选中的第二级，第三级也要对应上比如省市区 第一级所有省需要有，第二级，选择的省下的所有市，第三级，选择的所有的市下的区县，回显数据格式注意好，不对是回显不了的获取到所有省，判断要回显的省的id和当前省的id一样的，用这个省的id请求这个省的所有市，循环所有市，判断要回显的市的id，然后拿市的id请求所有区，最后给options赋值我这里是文字，存的时候就是文字，所以需要这样，如果是id，那就简单了，直接拿对应的id请求就行，就是组装好和写死的数据一样的格式就行...
一个页面有多个el-cascader级联选择器时，怎么解决动态加载和回显问题
qq_38019414的博客
06-14 3322
一个页面有多个el-cascader时，怎么解决动态加载和回显问题
element ui - Cascader 级联选择器 样式
Cyl0110的博客
12-05 1448
使用Cascader未设置样式时，列表高度会占据整个页面 可在全局样式文件中设置高度值 .el-cascader-panel{ height: 210px; } 去掉横向滚动条 .el-scrollbar__wrap{ overflow-x: hidden; } 文章参考与 element ui - Cascader 级联选择器 样式 - STRIVE-PHY - 博客园 感谢博主的分享 ...
el-cascader级联选择器搜索选中后，获取节点信息为空（已解决）
FilterXX的博客
10-25 3966
踩坑： 官方提供的getCheckedNodes()方法适用于手动点击节点获取信息，但并不能获取搜索后出现的查询结果的节点信息 查询结果如上↑，选中后获取不了节点信息。 随后在网上查了一下，发现可以使用getNodeByValue方法获取，如下： <!-- HTML --> <el-cascader ref="cascader" filterable clearable v-model="formobj.value" :options="parentoptions"
关于Elementui Cascader非叶子节点显示空白解决方案
苏克
08-29 2121
笔者项目中的地址选择是使用Elementui的Cascader来实现的如果是正常的用户选择还好，会选择到最后一级，但是如果地址信息是通过第三方平台通过来的且与本系统地址库不对应则需要做映射（跨平台同步地址库的心酸大家应该都懂）。有的平台地址本身就有问题，比如地区项只有到一级/二级这总情况就会显示空白。比如这个地址，信都区下面还有一级，但是因为不是叶子节点，所以显示空白。......
elementUI联级选择踩坑，下拉框hover触发背景会有黑色层
weixin_46420860的博客
09-21 930
问题 如题，遇到了这样一个问题，在使用el-cascader联级选择器时，下拉框中hover触发会花屏，背景有黑色遮罩 解决 是列表ul中最下面的svg path除了问题，虽然我也不太明白为什么，如果没有特殊需求，将其隐藏就好了 .el-cascader-menu__hover-zone path { display: none; } ...
Element-ui中 el-cascader 最后一级数据为空显示暂无数据问题
preoccupied_的博客
05-04 1087
原因是最后一级的children数据为空。
解决element-ui中 el-cascader 级联选择器 最后一级数据为空显示暂无数据问题
KMINLIKE的博客
06-07 2623
el-cascader 最后一级暂无数据是因为后端返回子级children为空，官网的children并不为空。
解决Element-ui中 el-cascader 级联选择器 最后一级数据为空显示暂无数据问题
m0_70547044的博客
02-05 3917
el-cascader 级联选择器 最后一级数据为空显示暂无数据问题
Cascader 级联选择器，解决了暂无数据问题
weixin_45546279的博客
12-19 5114
Cascader 级联选择器 当一个数据集合有清晰的层级结构时，可通过级联选择器逐级查看并选择。 Cascader 级联选择器认识 默认 click 触发子菜单官网介绍:链接 只需为 Cascader 的options属性指定选项数组即可渲染出一个级联选择器。通过props.expandTrigger可以定义展开子级菜单的触发方式。 <div class="block"> <...
Cascader 级联选择器多选时，一共两个面板，如何实现第一个面板单选，第二个面板多选
11-19
要实现 Cascader 级联选择器在有两个面板且多选时，第一个面板单选、第二个面板多选的功能，可以通过监听选择变化事件，对选择逻辑进行控制。以下是一个基于 Element UI 的示例代码： ```vue <template> <div> <el-cascader v-model="selectedOptions" :options="options" :props="props" @change="handleChange" ></el-cascader> </div> </template> <script> export default { data() { return { selectedOptions: [], options: [ { value: 'option1', label: 'Option 1', children: [ { value: 'child1-1', label: 'Child 1-1' }, { value: 'child1-2', label: 'Child 1-2' } ] }, { value: 'option2', label: 'Option 2', children: [ { value: 'child2-1', label: 'Child 2-1' }, { value: 'child2-2', label: 'Child 2-2' } ] } ], props: { multiple: true } }; }, methods: { handleChange(value) { let newSelected = []; const firstLevelMap = {}; for (let item of value) { const firstLevel = item[0]; if (!firstLevelMap[firstLevel]) { firstLevelMap[firstLevel] = true; newSelected.push(item); } else { // 如果第一个面板已经有选择，只保留该第一个面板下的选择 if (item.length > 1 && item[0] === newSelected[newSelected.length - 1][0]) { newSelected.push(item); } } } this.selectedOptions = newSelected; } } }; </script> ``` 在上述代码中，`handleChange` 方法会在选择发生变化时被调用。在这个方法里，通过一个对象 `firstLevelMap` 来记录第一个面板的选择情况，确保第一个面板只有一个选项被选中。如果第一个面板已经有选择，只会保留该第一个面板下的选择，从而实现第一个面板单选、第二个面板多选的效果。
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值