elementUI的级联选择器「el-cascader」切换数据时报错

最新推荐文章于 2024-08-07 12:28:13 发布
最新推荐文章于 2024-08-07 12:28:13 发布
阅读量1k 收藏 1
点赞数 3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41789865/article/details/107062459
版权

 

 

 

 

 

 

出现这个报错，一般都是应为改变了butlerform.allCommunitys里边的值，然后上一次cascader点击有默认的记录，但是butlerform.allCommunitys的值已经被更新，当然找不到上一次cascader点击的默认记录，故而会报错。

 

 

 

 

 

 

 

 

所以我们要加一个key去标识cascader的唯一性（:key="isResouceShow"），开始的时候 this.isResouceShow = 0,然后在切换所属小区（butlerform.allCommunitys）发生改变的时候再 ++this.isResouceShow，这样的话，当我们切换所属小区（butlerform.allCommunitys）时cascader级联选择器就是一个全新的选择器，就不会出现上边的那种报错情况。

 

 

以上种种是自己出现过该问题并参考了各位大佬得出的结论，如有不足或错误，还望各位大佬不吝指点一二！（来自一个菜鸟的“强词夺理”）

Anna诶
关注
Vue - Element UI 级联选择器 el-cascader 组件设置点击 label 文字直接选中，无需点击圆形单选框选中（解决开启 “单选模式“ 后无法通过点击整行直接选中的问题）
王佳斌
01-30 4022
vue，element ui，el-cascader，Cascader级联选择器，checkStrictly:true怎么点击文字选中效果，element UI级联选择器设置checkStr选择任意一级选项,只能点单选框选中不能点label文字行，点文字没反应无法选中，级联选择器点击文字选择，隐藏前面的单选框，el-cascader点击文字选择，只能点击圆圈才能选中，隐藏单选框并且点击整行直接选中，怎么点击文字行选中，如何点击每行的文字就能实现选中，怎么点文字就选中，实现点击label标题就选择，并且选中后
vue2/3+element - 将级联选择器el-cascader修改为“点击文字就能选中“效果，单选/多选模式下点击label整行都可以直接选中，复选框多选模式下解决只能点击图标才能选中的问题
高级前端工程师
07-23 2938
vue2，vue3，element plus，级联选择器，el-cascader，点击文字就能选中，如何修改成点label就能选中，单选，多选，复选框，单选框，模式，饿了么组件库，无法通过点击整行直接选中的问题，点击文字行就能选择后弹框收起，选中完弹框无法收起，级联选择 点击文本选中 多选，不生效，有问题，原来的功能受影响，点击文字可选中去掉单选按钮选中后菜单收起，ElementUI Cascader 级联选择器实现点击文本选中，懒加载的数据怎么办，动态数据请求，多选模式下点击label文本选择，点击文本直
elementui 级联选择器 报错 property ‘level‘ of null“
weixin_45345105的博客
12-02 327
property ‘level’ of null" 数组结构不一样，父级只有name children 没有value 但子集都有 name value children 所以报错了，
element ui Cascader 级联选择器 关闭tag时报错 ：cannot read ‘level‘ of null cascader
qq_29407683的博客
03-10 330
https://www.cnblogs.com/xiaorong-9/p/14103564.html
Blocked aria-hidden on a ＜input＞ element because the element that just received focus must not be...
最新发布
qq_44776454的博客
08-07 3万+
Blocked aria-hidden on a element because the element that just received focus must not be hidden from assistive technology users. Avoid using aria-hidden on a focused element or its ancestor. Consider using the inert attribute instead, which will a
elementUI el-checkbox勾选后逻辑取消勾选，点击后参数传递和显示不一致的异常错误
weixin_43688414的博客
12-01 4009
el-checkbox勾选后逻辑取消勾选，点击后参数传递和显示不一致的异常错误 问题描述： 父组件传递数据给子组件，用来控制el-checkbox的勾选，勾选后传递参数给父组件进行逻辑处理，比如某种条件下需要取消勾选，讲数据修改后再次点击勾选，发现传递过来的勾选的数据和当前勾选状态不一致，虽然勾选框没有勾选，但是传递的数据是一直在进行勾选的操作。 解决方法：在勾选change的事件中用this.$nextTick。 例子： 父组件代码 <template> <div>
el-cascader多选取消上次一级选中（一级单选，二级多选）
宁
09-22 1247
每次选择的时候取消上一次一级的选中，也相当于一级单选，二级多选。
elementUI的级联选择器el-cascader去动态更改disabeld，遇到数据不及时更新的问题
vicky_minmin的博客
12-24 4474
elementUI的级联选择器el-cascader去动态更改disabeld，遇到数据不及时更新的问题 问题： 　　1，项目开发过程中，使用场景是一个接口，返回的数据在主办部门和协办部门的级联选择器中展示。选择主办部门的任一项后，协办部门不能再选择，即（disabled = true） 　　但是在选择了主办部门，用主办部门的change事件打印出来数组，协办部门中的disabled都是正常赋值上去，同时主办部门也默认赋值了disabled属性 　　2，解决了上一个问题后，在主办部门下拉事件完成选择任一个值
element ui使用级联选择器el-cascader封装下拉框
weixin_43238931的博客
12-15 2388
之前项目中使用drownmenu封装下拉框，后面出现了一系列问题，用户体验感很不好。现在重新使用cascader重新封装下拉框组件。
拓展element-ui，级联选择器el-cascader的options为空插槽展示
Wonder_BBJ的博客
06-09 2168
拓展element-ui，级联选择器el-cascader的options为空插槽展示
el-select中多选回显数据后没法重新选择和更改
疑问 搜索 动手 解决 记录
03-02 1万+
<el-select v-model="list" filterable multiple @change="$forceUpdate()"></el-select> 标签里加个@change="$forceUpdate()" 就好了
el-cascader的使用以及报错解决
新前端小白的博客
09-02 4万+
项目中使用到了element-ui中的cascader级联选择器，组件下拉列表是动态的，根据用户选择的类型来从后台请求数据 <el-select v-model="type" @change="getCascader" placeholder="请选择类型"> <el-option v-for="item in type" :key="item...
el-cascader级联选择器模糊搜索选中后，获取节点信息为空、模糊搜索点击之后获取的是上一次的值
qq_46663280的博客
11-27 1659
这个方法只能获取到手动点击的数据，这种方式有一个弊端，就是无法获取到“搜索条件下”的node节点，打印时getCheckedNodes为undefined，所以会出现值为空。针对无法获取到“搜索条件下”的node节点，打印时getCheckedNodes为undefined，所以会出现值为空这个问题。搜索会遇到另一个bug，当你手动清除重新搜索它获取数据的值还是删除之前选项的值，出现这个问题原因是：级联选择器会有缓存。通过getNodeByValue()方法可以获取到搜索条件下的node节点数据。
vue中cascader级联选择中数据的已勾选内容错乱问题
weixin_44237303的博客
04-12 334
点击第一列的内容会更新第三列的数据，这里我先选择了①，在选择第三列的一些选项后，再点击②，选择一些选项后再返回到①，此时第三列已选的选项已经错乱，选中了此前未被选中的内容，再返回到②同样如此。
VUE 级联菜单cascader 的options动态加载页面无变化
JAVA求生之路——博主406766467
08-23 785
绑定的options的是一个数组的某个index位置，调用api接口后，界面无变化。
ElementUI组件Cascader数据显示删除错位
彭世瑜的博客
07-25 1788
ElementUI组件Cascader显示的数据和我删除的数据不一致 解决办法： 将回显数据的顺序和配置数据顺序以相同的方式排序 比如: // 配置顺序 [ label: "分类1", value: '1', children: [ { label: "分类1-1", value: '1-1', }, { label: "分类1-2", va
element-ui中级联选择器添加验证规则时提示[“xxx is not a string“]
m0_51608940的博客
06-17 1846
1、问题 element-ui中级联选择器添加必填验证规则时，终端提示： [“xxx is not a string”]，且在选择选项之后还提示验证出错的信息 2、原因 因为级联选择器双向数据绑定的是选中项的id组成的数组，是一个数组，而验证规则中默认选择或输入的值是字符串。 3、解决办法 goods_cat:[ // 表单验证规则中默认输入或选择的值是字符串，在这里可以指定输入或选择的值的类型 {type:'array',required:true,messag
element-UI级联选择器(Cascader 回显、默认显示项) - （返回结果的）格式转化 - 代码篇
热门推荐
草巾冒小子的博客
03-26 4万+
el-cascader组件 ：（返回结果的）格式转化 有时候会报错：TypeError: thsAreaCode.replace is not a function （bug截图如下） 说白了就是该组件结果返回获得的是个数组，而不是字符串。所以不能使用.replace方法去转化格式。 因而：才有了下面修改后的代码。 为了解决上述问题，先看文章内的举例代码： 参考文章：（element-U...
动态懒加载级联选择器el-cascader输入及回显
06-20
在 Element UI 的级联选择器（el-cascader）中，动态懒加载是一种优化性能的技术，它允许在用户展开更多层级选项之前仅加载当前可见的节点，从而避免一次性加载大量数据导致的性能问题。这个功能主要应用于数据量...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值