使用el-checkbox,要么全选要么全不选问题

在Vue.js应用中遇到el-checkbox组件导致的全选问题,当v-model值为字符串而非数组时,点击一个选项会导致其他全部选中。尽管确认v-model已绑定数组,但发现当字段为null时,el-checkbox未正确处理。通过在数据初始化阶段确保该字段为数组,解决了这一问题。同时,考虑到后期维护和避免BeanCopy导致的BUG,建议在前端或Service层明确处理空值,以提高代码健壮性。

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

在使用el-checkbox实现多选框时,出现如上问题。在打开信息编辑页面时,多选框会出现点击其中一个,其他全部选中的问题。查阅资料后发现,点击一个其他的都选中或取消,就是v-model里面的是字符串,这个时候只要找到v-model里面的值为何不是数组,然后改为数组就能解决问题。

然而,我十分确定我v-model中的值是一个数组...

在多次测试后发现,是growUp字段为null时,el-checkbox并不会主动将他默认为数组

于是,在映射时进行初始化即可解决这一问题。

反思

事后在进一步研究el-checkbox过程中,阅读到了另一篇文章,https://www.cnblogs.com/w2xh/p/8260752.html

由此想到,如果按照我的解决方法,由于后续维护者不知情或者不知情者使用BeanCopy进行IgnoreNull拷贝时,非常容易产生BUG。目前我认为的更好的解决方法应该是,在使用这个字段前,在前端页面或者Service实现类中,对其进行空值赋值。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值