el-cascader编辑页面清空按钮需要点击多次才能清空数据,并且报错rror in callback for watcher “options“,null (reading ‘level‘)

本文详细描述了在使用el-cascader实现部门与人员多选级联时遇到的报错问题及解决方法,包括设置key值和cascader++操作。同时,针对清空数据需多次点击的问题,通过数组去重处理给出了解决方案。适合前端开发者参考。

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

      最近手头上有个需求,就是建表时建表部门必须选该部门对应人员,只有选择到的人员才有权利操控这个表,部门和人员都可多选;按照原型图,决定使用el-cascader级联选择器,但看似简单的两个多选级联框,能碰到的问题都被我遇到了,接来下详细阐述,希望对大家有帮助;

1,首先,是报错问题,看下图:

 

导致报错的原因有百度,大部分都是说给cascader加key值,然后动态改变cascader的值,cascader++操作,但至于具体在哪cascader++操作,众说纷纭,也没有具体讲清楚,接下来上代码:

 关键之处在这:实现cascader++需要监听option变化时给与赋值;

 还是挺简单的,三步操作就解决了;

2,清空按钮需要点击至少2次才能清空数据问题,截图这里需要点击5次,o(╥﹏╥)o看图:

 

 这个问题其实主要跟个人代码里面处理数据有关系;涉及到数组去重

 因为一个部门对应多个人员,给后端传数据的时候,后台要求的数据格式是按人加部门为一个对象传数组,多个人就会有多个相同部门对应不同人员的对象数组,部门跟人员放在一个数组里面传,但是回显需要分开的,这就要求拿到详情数据后需要自己处理,最终发现,处理的部门数组有多个相同的机构编码,因为多个人员对应同一个部门,按人员个数返回(如上图,6个人员就有6个orgcode),当然回显没有问题,但是操作上就有问题了,所以我们要对数组进行去重,这样就不会造成多次点击才生效的情况;

 这里提供一个去重的好方法给大家,上图:

 

至此,问题都解决了,希望能帮到遇到同类问题的你们!

 

 

 

 

 

 

 

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值