react+antd表格实现多列复选框和单选框

实现效果图

为了快速为大家解决问题，直接上代码：

这种写法对数据格式有严格要求，可以让后台把顺序给你排好,这个数据是表格的title：
let list = [ {name:'经营'}, {name:'智能'}, {name:'云计'}, {name:'电子商务'}, {name:'物流'}, {name:'运维'}, {name:'其他'} ]
这个是对应类型下的列表：
let data = [ [{name:'应用'},{name:'相关应用'},{name:'计算'},{name:'电商'},{name:'物流'},{name:'平台'},{name:'咨询'},], [{name:'管理'},{name:'生产'},{name:'智能'},{name:'电商应用'},{name:'储运'},{name:'业务服务'},{name:'工程监理'},], [{name:'预算'},{name:'指挥'},{name:'设施'},{name:'零售业务'},{name:null},{name:'维保'},{name:'园区'},], [{name:'金融'},{name:'资源'},{name:'安全'},{name:'支付'}], [{name:'科研'},{name:'安全'},{name:'智能'}], [{name:'工程'},{name:'环保'},], [{name:'综合'},{name:'模拟'},], [{name:'共享'},{name:'流程'},], [{name:'风控'},{name:'控制'},], [{name:'主数据'},{name:'研究院'},], [{name:'分析'},{name:'交付'},], [{name:'移动'},{name:'合规'},], ]

用ES6循环添加antd表格的columns：
columns
list.map((item,key)=>{ data_list.push({ title:item.name, key:key,//不写这个antd会报错，也可以为Table规定其它取行值 render:(text)=>{//在这里可以输出一下text，是个数组，判断它为真的时候才return,否则返回空 return text[key] && text[key].name?<Checkbox values={text[key].name} ID={text[key].id} onChange={this.onChange} >{text[key].name}</Checkbox>:"" } }) })
保存在state中：
this.setState({ columns:data_list, dataSource:data })
这是我写的Table,我这里不需要分页，要是需要分页的也是会翻页，
Table:
<Table columns={columns} dataSource={dataSource} pagination={false} />
在多选框中的onChange中返回选中的数据,得到选中的数据
onChange=(e)=>{ console.log(e) }
你学会了吗？