react使用Antd表格
1.表格中插入图标或者选择框
需要用到columns中的render回调
columns: [
{ title: '姓名', dataIndex: 'name', key: 'name', align: "center" },
{ title: '头像', dataIndex: 'img', key: 'img', align: "center" ,render: (record) =>
<img src={record} width="100px" height="100px" style={{borderRadius:"50%"}} alt=""/>},
{ title: '性别', dataIndex: 'sex', key: 'sex', align: "center" ,render:(record)=>{
return record?"男":"女"
}},
{ title: '登录状态', dataIndex: 'online', key: 'online', align: "center",render: (record) =>
<Switch checked={record} />},
{ title: '手机号', dataIndex: 'phone', key: 'phone', align: "center" },
{ title: '地址', dataIndex: 'address', key: 'address', align: "center" },
{
title: '操作',
dataIndex: '',
key: 'x',
align: "center",
render: () => <Button>删除</Button>,
},
],
2.表格中分页配置
let pagination={
total:50,
showSizeChanger:true,//是否可以改变pageSize
showQuickJumper:true//是否可以快速跳转到某页
}
<Table {...this.props} rowSelection={rowSelection} pagination={pagination} />