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

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

#vue #element #el-cascader

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

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

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

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

处理后界面

引用vant cdn 组件 van-cascader 没有效果
qq_42877655的博客
12-29 2564
原因：引用cdn版本太低 https://vant-contrib.gitee.io/vant/#/zh-CN/cascader 在其介绍里面有说2.12之后的版本可以，教程里面的也是2.12，但是不行所以我就在想是不是2.12之后，而不包括2.12 请在vant得更新版本里面找到最新版本 https://vant-contrib.gitee.io/vant/#/zh-CN/changelog 我的是v2.12.37 教程给的是vant@2.12 <!-- 引入样式文件 --> <link
ElementUI Form：Cascader 级联选择器
ChinaDragon10的博客
02-17 1914
ElementUI Form：Cascader 级联选择器
解决element-ui中级联选择器(Cascader)出现空白选项的bug
ybx18046048113的博客
06-20 661
前端是根据children来进行级联显示的，后端对象中的children属性增加注解。
使用el-cascader组件实现一个可搜索、可清空的级联选择器
最新发布
2303_78263863的博客
05-10 557
本文介绍了如何使用el-cascader组件实现一个可搜索、可清空的级联选择器，并详细说明了如何配置选项数据源、自定义value和label字段，以及如何处理和分类数据。通过filterable和clearable属性，用户可以搜索和清空选项。props配置允许自定义字段名，如value和label，并支持禁用特定级别的节点。数据源groupedFactors通过遍历和分类处理，最终转换为级联选择器所需的树形结构。文章还展示了如何避免重复处理数据，并通过中文标签将要素分类到不同的观测组中。
vant组件--日历组件van-calendar初始化显示空白，滑动一下屏幕才显示（ios系统出现的问题）
qq_48499167的博客
06-29 1667
日历组件van-calendar初始化显示空白，滑动一下屏幕才显示（ios系统出现的问题）
Vue使用Element的级联选择器Cascader出现空白面板
小钻风的博客
08-20 2380
最近使用Vue写项目，有用到Element的级联选择器<el-cascader> 由于后台给的数据，不是太符合级联选择器数据的规范，比如children为空时，级联选择器会出现空白的面板，又比如给的是text而不是label，如果直接使用，不会显示文字，我也是找了很久，自己试了很久，才找到一种解决办法的。 在Element-UI是的级联选择器中，只有children这个子节点，即使children: []，也会出现一个面板，就是图中的这个，为了去除这种空白的面板，需要对数据进行处理。 下面这
el-cascader级联选择器搜索选中后，获取节点信息为空（已解决）
FilterXX的博客
10-25 3878
踩坑： 官方提供的getCheckedNodes()方法适用于手动点击节点获取信息，但并不能获取搜索后出现的查询结果的节点信息 查询结果如上↑，选中后获取不了节点信息。 随后在网上查了一下，发现可以使用getNodeByValue方法获取，如下： <!-- HTML --> <el-cascader ref="cascader" filterable clearable v-model="formobj.value" :options="parentoptions"
Element el-cascader 级联选择器最后一级数据为空显示暂无数据问题(已解决)
NewBie96的博客
02-28 1741
Element el-cascader 级联选择器最后一级数据为空显示暂无数据问题
el-cascader级联选择器遇到的问题！
qq_40273408的博客
02-20 1612
我遇到的问题如下图所示： 当选择级联选择器是，所有选项都显示出来了。 检查数据没有问题，代码也没有问题，见下图： 然后，我从控制台，查看到级联菜单的定位属性： { position: fixed; top: -465px; left: 240px; z-index: 2061; } 从此处看可知，只要修改对应的高度属性，应该就能解决问题，同时在网上也看到了大神相...
element ui - Cascader 级联选择器 样式
Cyl0110的博客
12-05 1395
使用Cascader未设置样式时，列表高度会占据整个页面 可在全局样式文件中设置高度值 .el-cascader-panel{ height: 210px; } 去掉横向滚动条 .el-scrollbar__wrap{ overflow-x: hidden; } 文章参考与 element ui - Cascader 级联选择器 样式 - STRIVE-PHY - 博客园 感谢博主的分享 ...
Cascader 级联选择器通过状态展示隐藏
weixin_45259626的博客
12-09 2748
在项目中遇到一个新需求，Cascader 级联选择器选择以后，选中的那个数据后来被删除了，但是还要让它回显和以前一样。 后端就把所有的数据都保留了，但增加了一个状态字段，供我判断哪些是删除了的,status===0表示删除。我拿到数据以后配合element的disabled来改变下拉框样式将数据隐藏。 <el-cascader v-model="value" :options="options" ></el-cascader> da
关于Elementui Cascader非叶子节点显示空白解决方案
苏克
08-29 2056
笔者项目中的地址选择是使用Elementui的Cascader来实现的如果是正常的用户选择还好，会选择到最后一级，但是如果地址信息是通过第三方平台通过来的且与本系统地址库不对应则需要做映射（跨平台同步地址库的心酸大家应该都懂）。有的平台地址本身就有问题，比如地区项只有到一级/二级这总情况就会显示空白。比如这个地址，信都区下面还有一级，但是因为不是叶子节点，所以显示空白。......
解决vue2+element使用cascader时children为空时，最后一级显示无数据问题
weixin_47299259的博客
10-26 639
思路：使用递归把children为空改为undefined。
elementUI联级选择踩坑，下拉框hover触发背景会有黑色层
weixin_46420860的博客
09-21 895
问题 如题，遇到了这样一个问题，在使用el-cascader联级选择器时，下拉框中hover触发会花屏，背景有黑色遮罩 解决 是列表ul中最下面的svg path除了问题，虽然我也不太明白为什么，如果没有特殊需求，将其隐藏就好了 .el-cascader-menu__hover-zone path { display: none; } ...
Element-ui中 el-cascader 最后一级数据为空显示暂无数据问题
preoccupied_的博客
05-04 1036
原因是最后一级的children数据为空。
解决element-ui中 el-cascader 级联选择器 最后一级数据为空显示暂无数据问题
KMINLIKE的博客
06-07 2516
el-cascader 最后一级暂无数据是因为后端返回子级children为空，官网的children并不为空。
解决Element-ui中 el-cascader 级联选择器 最后一级数据为空显示暂无数据问题
m0_70547044的博客
02-05 3762
el-cascader 级联选择器 最后一级数据为空显示暂无数据问题
el-cascader 级联选择器 children为空 和获取value和label问题
weixin_42272558的博客
03-22 4128
1. 出现问题bug: el-cascader控件 最后一级出现空白 暂无数据 在后端处理完树形数据之后最后一个children数组为空数组，这样就会产生bug 解决方法: （和后端处理数据一样就行递归判断数组是否为空） getClassificationTree() { getClassificationTree({ 'name': 'name' }).then(response => { this.options = this.getTreeD.
解决element-ui中级联选择器(Cascader)出现空白选项的bug---空级联bug
许洪源的博客
07-26 390
解决element-ui中级联选择器(Cascader)出现空白选项的bug—空级联bug https://blog.youkuaiyun.com/suprezheng/article/details/86586902
果需要修改 el-cascader 组件中的级联选择器面板的高度
06-07
如果需要修改 `el-cascader` 组件中的级联选择器面板的高度，可以通过以下方式进行： 1. 在 `el-cascader` 组件中添加 `popper-class` 属性，并指定一个自定义的样式类名，如：`<el-cascader popper-class="custom-...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值