getColumns = () => {
axios({
'method': "get",
'url': "http://xx"
}).then(response => {
var res = response.data
if (res.status) {
var arr = res.data.map(item => {
return {
title: item.name,
dataIndex: item.name,
align: "center",
render: (obj, record) => {
let currentP = item['permissions'][record.value] || {}
console.log(currentP);
return (
<Checkbox onChange={onChange} />
)
}
}
})
console.log(arr);
arr.unshift({
title: "权限",
dataIndex: "cn_permission",
align: 'center'
})
this.setState(
{ arr: arr }
)
var arr = []
Object.keys(res['data'][0]['permissions']).forEach((permission, index) => {
var obj = {}
obj['node_order'] = index
obj['cn_permission'] = res['data'][0]['permissions'][permission].name
obj['en_permission'] = permission
res.data.forEach((role) => {
obj[role.name] = {
'id': role.id, value: role['permissions'][permission].value
}
})
arr.push(obj)
});
this.setState(
{ datas: arr }
)
} else {
}
//console.log(textColumn);
}).catch(error => {
})
};
<Table
style={{ textAlign: 'center' }}
columns={arr}
dataSource={datas}
rowKey="permissions"
bordered
pagination={false}
/>
其中后端返回数据格式为类似如下结构：
[
{
"id": "3",
"name": "系统管理员",
"description": "a",
"permissions": {
"manage_company_user": {
"name": "管理集团用户",
"value": false
},
"manage_foreign_user": {
"name": "管理外部用户",
"value": false
},
"add_and_edit_project": {
"name": "新建项目和编辑项目",
"value": false
},
"edit_project": {
"name": "编辑项目",
"value": false
},
"edit_project_custom_field": {
"name": "编辑项目自定义属性",
"value": false
},
"edit_project_users": {
"name": "编辑项目人员",
"value": false
},
"manage_system_role": {
"name": "管理职责列表",
"value": false
},
"manage_category": {
"name": "管理分类",
"value": false
},
"manage_workflow": {
"name": "管理状态流转设定",
"value": false
},
},
},
]
怎么样使用类组件根据后端所返回数据的value的true/false默认选中checkbox，且怎么样在选中checkbox后点击保存按钮向后端修改value
