element-ui Cascader级联选择器无法回填解决方案

已于 2022-07-14 17:25:58 修改
阅读量1.4k 收藏 1
点赞数 3
文章标签： html 前端 elementui
于 2022-07-14 17:17:55 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_48380757/article/details/125788359
版权
本文探讨了Element-UI级联选择器组件的bug，由于数据格式要求Children不能为空数组。作者提供了问题排查过程，递归删除空Children的解决方案，并展示了修复后的完美回显效果。

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

1.无法回填时element-ui代码和后台返回的数据格式如下

 2.小伙伴可以看下图，根本无法把选中的数据回填到选择框里，有时候全选都会有问题，经过大量测试查阅资料得知原因：就是因为数据格式的问题（可理解为element-ui 原生组件BUG）

3.经过多次测试总结：element-ui里Cascader级联选择器组件要求的数据格式里面可以有多层子级（Children），但是Children一定不能为空数组，要么叫后台Children为空时不返回这个字段，要么前端自己写递归处理数据（delete掉），不然就会出现以上BUG，以下是写的一个递归遍历删除Children为空的数组，我们来整改一下代码

4.最后我们再来看一下处理过后的效果：回显完美解决！

喜欢的小伙伴点赞加关注哦！！！

element-plus级联选择器使用懒加载获取数据无法回显的问题解决方案
weixin_44804939的博客
06-12 3286
element-plus级联选择器使用懒加载获取数据无法回显的问题解决方案
vue中级联选择器回填_详解关于element级联选择器数据回显问题
weixin_33594971的博客
02-05 1559
element级联选择器数据回显问题对于前端小菜鸡来说，被这个问题也是困扰了好久。也是百度的方法。表单部分代码： placeholder="请选择部门":props="depShowType":options="deptData"filterablechange-on-selectv-model="SelectdeptId">data中定义： depShowType:{value:'id',...
elementUI懒加载树组件el-cascader无法回填问题
程序媛的梦工厂
10-27 1218
一、使用方法及源吗 使用方法 // postInfo为每层下钻岗位的id selectedName为XXX岗位名称，也就是最后需要显示的岗位信息 url为获取岗位信息的url // postInfo: [111,222,333], selectedName: '皮草运营商', url: "xxx.findxxx" <origanizeCascader v-model="postInfo" :selected-name.sync="selectedName" url="xxx.findx
vue中级联选择器回填_vue项目中的element-ui地区级联选择器
weixin_28802509的博客
01-14 553
在项目开发过程中遇到了需要用到element-ui的el-cascader地区级联选择的问题，做个笔记记录下。1.资源文件引入type="text/javascript"src="/static/test/lib/js/vue/vue-resource.js">2.新建选择器placeholder="请点击选择地址":options="options"v-model="selectedOption...
el-cascader--赋值后，下拉框中有勾选但是输入框中没有回显的bug
最新发布
PSGLGDyaphets的博客
04-02 1912
然后我发现勾选后，value的值类型会和options中的类型相同，都是Number，然后提交到后端后，再次查询页面的回显值变成了String。导致了回显后双向绑定的value值类型和options里的不同，从而导致无法回显。在el-cascader的文档中，对于绑定的value值的类型并没有限制。在发现el-cascader的回显出现问题时，可以注意下回显的值类型是否和options中的一致。最后让后端修改了存储的逻辑，存储和前端提交的字段相同的类型，问题就解决了。个人见解，欢迎指正。
Element-ui Cascader 级联选择器回显数据
大漠孤烟
02-04 2374
回显的方式 两种情况： 1.直接使用JSON回显（针对于每个人看到的菜单一致，数据库直接保存数据JSON串，直接回显） 2.保存最后一位，递归回显 （针对于每个人看到的菜单不一样，有的人能看到两级，有的人能看到三级，只保存最后一位，然后前端做一下处理） 以下代码中的变量含义： resultJson：要回显的JSON串 navList：级联JSON数据（菜单父子结构数据） navIds：数据库保存的 2，3，4（需要回显的最后一位ID数组） 直接使用JSON回显 ，数据库保存数组JSON串，回显
详解element-ui级联菜单（城市三级联动菜单）和回显问题
10-16
`<el-cascader>`是Element-UI用于创建级联选择器的组件。在示例代码中，我们看到`v-model`绑定到`ruleForm.censusLand`，这使得菜单选择的值可以双向绑定到数据模型。级联菜单的配置项包括`placeholder`（占位提示）...
element Cascader级联选择器 数据懒加载回填实践
qq_39373940的博客
03-24 1407
当前使用element版本2.15.1
elementui中el-cascader级联选择器回显解决办法（稳定有效）
m0_54883970的博客
02-26 2477
1、场景描述 这里展示的是已经获得后台传回来的需要回显数据，在级联选择器中进行回显，并且能保持稳定回显 2、解决办法 2.1、在el-cascader标签中加入 :key=“modalKey” v-model=“choose” 2.2、在data中定义 data() { //定义变量和初始值 return{ modalKey: 0, choose: [], } }, 2.3、赋值 参考以下代码 methods:{ //创建具体的方法， getInfo() { course.getCours
element级联选择器，异步加载回填问题
Carrie_zzz的博客
01-08 2705
啊啊啊，记录一下 我用的动态 加载，但是一直回填不过去，我其实想到了因为异步所以一直没上去，但是一直想着找其他办法 问题其实很简单，因为这个给我了启发https://codepen.io/hopekayo/pen/abovxxM?editors=1111 以上两点都是关键，你发现没有下面的还是无法回填 ...
解决Element中el-date-picker组件不回填的情况
01-21
1.问题描述 当我们在实用ElementUI组件完成项目的时候可能会遇到这样的需求，比如： 新建一个活动，需要定义活动的时间范围； 因此我们在新建活动的操作过程中需要选择一段时间区间以及活动名称等信息提交，新建完成； 网页上出现了新建好的活动，其他人想查看详细信息，打开页面，发现时间区间并没有实现回填！ 2.问题分析 时间信息没有回填，首先要检查，后台数据返回情况以及页面上字段信息是否有差异等细节； 如果没有以上的情况，那就是我碰到的这种情况了， 后端数据返回没有差异，而且页面字段也没有错，其他的信息也正常回填，唯独时间不回填，同时也伴随一次回填后续不回填等诸多情况。总结来说就是：页面与数据
element UI的el-cascader数据回显
qq_42330926的博客
05-31 1586
【代码】element UI的el-cascader数据回显。
vue中级联选择器回填_vue+element级联选择器对接后台数据
weixin_34599958的博客
01-30 923
1.后台接口返回的数据肯定要和级联选择器的数据一致,所以我专门弄个model存放返回的值，如下：/*** @Auther: GGDong* @Date: 2019/4/3 10:30*/@Getter@Setterpublic class ServerList{//值private String value;//名称private String label;//子级private List chi...
关于ElementUI中级联选择器选择内容时出现空白的情况
zb201666的博客
05-27 6770
关于ElementUI中级联选择器选择内容时出现空白的情况 使用ElementUI中级联选择器进行某些数据的选择时，发现最后一级是空白的页的情况，如下图所示： 原因分析 通过查看请求中的响应我们发现，响应数据中存在children为[]空数组的情况，而在ElementUI中的级联选择器里，[]会被解析为空白数据进行展示，因此，前端人员在接受到后端开发人员返回的数据时，需要将children为[...
el-cascader 动态加载选项、编辑时数据回显问题 、单选不加载下一级节点、点击标签选中
热门推荐
风间琉璃c
03-24 3万+
el-cascader 动态加载选项 以及编辑时数据回显问题
解决element-ui中级联选择器(Cascader)出现空白选项的bug---空级联bug
无人之岛08的博客
12-01 2211
在使用element-ui级联选择器的过程中，发现出现 空级联 的bug 首先我们分析出现空级联原因是：由于数据是从后台传递过来的，当后端的老铁使用递归算出菜单，然后转换成json传递到前端的时候。就会出现最底层 的子项中 的 children 为空数组，这样就会造成，空级联 的bug存在。 解决办法： 在前台js代码中，同样使用递归的方式，将最底层中的 children设为undefined HTML部分： <el-cascader :change-on-...
element-ui使用Cascader 级联选择器遇到的坑
fangqi20170515的博客
03-28 870
按照官网给的教程使用，当级联选择器内容需要动态变化时，会爆出Cannot read property ‘level’ of null错误。
解决ELement-UI三级联动数据不回显
lin85253788的博客
12-25 1274
目录 一.处理数据时使用this.$set方法来动态地设置实例中的属性，以确保其响应式。 二.检查数据格式是否正确三.绑定v-if 确保每次执行 四.完整代码
el-cascader 数据回显 二维数据回显 多选框数据回显问题 真的坑
qq_36252295的博客
08-31 2204
问题2、二维数组回显问题，排除了问题一以后就需要检查一下我们是否使用了v-model标签，这个是真的坑，数据类型与格式一模一样都会导致回显失败，解决方法很简单，直接换成value去绑定值。而且使用v-model会报错，比如。是否一直，一般给出得值是数字类型得，例如[1,2,3,4,5]，经过我们后端传回来得时候加工过后是["1","2","3"]，那么我们在处理得时候必须给他转换一下类型Number()，如下图。问题1、首先出现这样的问题，需要检查的必须要是值得。
前端如何实现省市区查询
04-05
2. 构建省市区选择器：可以使用常见的UI组件库，如element-ui、ant-design等，也可以自己实现。通常需要考虑用户体验和交互方式，比如是否需要级联选择等。 3. 实现数据绑定：将省市区选择器和数据进行绑定，用户...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值