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
怎么样使用类组件根据后端所返回数据的value的true/false默认选中checkbox,
可以参考下这篇文章的思路,链接:https://blog.51cto.com/u_15127544/3791388
怎么样在选中checkbox后点击保存按钮向后端修改value
这个问题,我觉得这个实例讨论可以给你做参考,链接:https://developers.weixin.qq.com/community/develop/doc/000a0ac17ac3c03ea8dac377c51800
已私信,请查阅
<div class="col-sm-10">
<label class="checkbox-inline">
<input type="checkbox" name="role" value="1"> 管理员
</label>
<label class="checkbox-inline">
<input type="checkbox" name="role" value="2"> 普通用户
</label>
<label class="checkbox-inline">
<input type="checkbox" name="role" value="3"> 人力
</label>
<label class="checkbox-inline">
<input type="checkbox" name="role" value="4"> 记者
</label>
</div>
var roles = returnData.roles;
if(roles != null) {
$.each(roles, function(key, value) {
$("input[name='role'][value='"+value.roleId+"']").attr("checked", true);
});
}