react使用Antd表格

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} />