antd-Checkbox多选操作

更新时间:2023-07-18 22:26:01 阅读: 评论:0

机警的意思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={this.state.stoneIndeterminate}  onChange=
国庆日记{CheckAllStoneChange.bind(this,lectedGroup(this.props.addPropertyKind[0].data))} checked= {this.state.stoneCheckAll}>
全选
<CheckboxGroup options={lectedGroup(this.props.addPropertyKind[0].data)}    value=
{this.props.defaultCheckedList1 }    onChange=
{ChangeInt.bind(this,lectedGroup(this.props.addPropertyKind[0].data))}/>
摄影佳作
/Checkbox>
indeterminate:负责样式控制, true/fal
checked:勾选还是未勾选,true/fal
人工流产后多久来月经onChange:勾选时触发的⽅法
options:所有的勾选⼦项,list
思路:
1、单个勾选:
获取勾选的值,将其存⼊⼀个value属性对应的list⾥⾯,王维安
2、全选:
村头那傻妞
判断全选按钮的状态,如果是true,则说明是全选,则将option中的list赋值给value中的list;如果为fal,则说明是反全选,将value中的list赋空即可。

本文发布于:2023-07-18 22:26:01,感谢您对本站的认可!

本文链接:https://www.wtabcd.cn/fanwen/fan/89/1086923.html

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。

标签:勾选   选项   需要   变成   数据   全选   获取   操作
相关文章
留言与评论(共有 0 条评论)
   
验证码:
推荐文章
排行榜
Copyright ©2019-2022 Comsenz Inc.Powered by © 专利检索| 网站地图