antd checkbox 默认选中_antd-Checkbox多选操作

在项目中遇到了需要有多选操作的功能,刚开始的时候以为挺简单的,但是随着项目的深入,发现并不是想象的那么简单。下面就说一说我遇到的一些问题吧:

1、将后端接口的数据变成多选项:

思路:就是将所有的要展示数据重新整理,最后变成一个新的list放到CheckboxGroup的option里面去。例如[‘选项1’,‘选项2’,‘选项3’]。

2、在勾选项中加入ID:

按照上面的例子,我每次勾选能获取到我勾选的内容,但是我需要获取我勾选项的id,但是我显示又要是显示的是它的名称,这个操作应该怎么办呢?这个时候就需要对之前的list进行重新整理了,将之前的字符串list,变成一个object 的list,object的内容为:object = {'label':'选项1‘,'value':'1001'},将选项的名称放进labei中,将id放进value里面,这样勾选的时候,拿到的就是id值了。

3、赋予初始值:

在checkboxGroup里面有一个value属性,就是用来展示已经勾选的值。

全选

/Checkbox>

indeterminate:负责样式控制, true/false

checked:勾选还是未勾选,true/false

onChange:勾选时触发的方法

options:所有的勾选子项,list

思路:

1、单个勾选:

获取勾选的值,将其存入一个value属性对应的list里面,

2、全选:

判断全选按钮的状态,如果是true,则说明是全选,则将option中的list赋值给value中的list;如果为false,则说明是反全选,将value中的list赋空即可。

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值