ant-design for vue 组件库中的多选框checkBox

本文讨论了在使用ant-design-vue组件库时遇到的CheckBox组件的一个bug,即设置 isChecked 为 false 时,虽然视觉上未勾选,但实际行为已触发勾选。作者通过创建vue-cli项目并进行测试,发现组件库仅通过样式更改了多选框状态,而未更新其checked动作。为解决这个问题,提出了通过绑定ID获取原生DOM元素并直接修改checked属性的方法,以确保状态与行为同步。

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

目前我所做的项目中用到了vue的一个组件库----ant-design,是目前比较流行了三大组件库之一
在应用到其中的<a-checkBox>标签时发现了其中的一个bug
代码如下:

<a-checkbox :checked="isChecked" @change="onChange"></a-checkbox>

拥有一定js基础的程序员都知道,在原生的js中,多选框的书写方式如下

 <input type="checkbox" :id="box" @change="onChange($event)"/>

我们可以通过如下方式来更改多选框的勾选状态

let el = document.getElementById(id)
el.checked = false

其中checked表示多选框的勾选状态以及触发的 勾选/取消勾 选这个动作
但在ant-design组件库中我发现,当我将isChecked的状态置为false时,多选框的转态确实没有被勾选上,但是勾选的动作确实已经提交了,下次点击时触发的仍然是取消勾选,这与展示给用户的勾选状态明显不一致。
为了证实这一想法,我进行了如下操作。

搭建一个vue-cli项目模板,使用npm安装ant-design组件。
更改三个文件
main.js如下

import Vue from 'vue'
import App from './App'
import route
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值