带复选框的表格（ant design）

要写个带复选框的表格，效果如下：

然而在官网看到这代码有点无语：

const data = [];
for (let i = 0; i < 46; i++) {
  data.push({
    key: i,
    name: `Edward King ${i}`,
    age: 32,
    address: `London, Park Lane no. ${i}`,
  });
}

我要的不是固定数据啊！！！于是开始探索~~

1、导入：

import { Table } from 'antd';

//这个是前后台分离的，userInfo为后台数据获取方法
import { userInfo } from '../../../api.js'

2、表格栏：

const columns = [{
  title: 'Name',
  dataIndex: 'name',
}, {
  title: 'Age',
  dataIndex: 'age',
}, {
  title: 'Address',
  dataIndex: 'address',
}];

3、主体：

export default class personInfo extends  Component{
    constructor() {
        super();
        this.state = {
            dataList:[],//表格列表
            pagination: {//自定义分页器
                showTotal: total => `共 ${total} 项`
            },
        };
    }

    componentWillMount(){
        //表格数据
        personInfo({pageSize:10,pageNum:1}).then(res => res.json()).then((res) => {
            if (res.meta.code && res.meta.code == '200') {
            
                if((res.data.total/10)>50){    
                    this.state.pagination.showQuickJumper=true;
                }
                if (res.pageSize >= res.total) {    //不足一页，分页器禁用
                    this.state.pagination = false
                }
                this.setState({
                    dataList:res.data['records'],
                    pagination:{
                        total:res.data['total'],
                        onChange:this.pageChange,
                    }
                })
            }
        })
    }

    //表格使用

    render(){
        return (
            <Table

                   dataSource={this.state.dataList}
                   columns={this.columns}
                   rowKey={"userName"}    //如果数据中没有“key”这栏，必须要手动指定，否则会出错
                   rowSelection={this.rowSelection}//复选框
                   bordered    //要边框
                   pagination = {this.state.pagination}
            />

) }

//其他函数
    rowSelection = {    //复选框选定
        onChange: (selectedRowKeys, selectedRows) => {
            console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
        },
        getCheckboxProps: record => ({
            disabled: record.name === 'Disabled User', // Column configuration not to be checked
        }),
    };

    pageChange = (page, pageSize) => {    //当前页码更改,page:请求的当前页码,pagesize:每页大小
        this.setState({
            loading:true,
        })
        let para = {pageNum:page, pageSize: pageSize};
       personInfo(para).then(res => res.json()).then((res) => {
           this.setState({
               dataList:res.data['records'],
               loading:false,
           })
        })
    };

其他补充：

res.data的其他值：

total:总记录数

size：每页大小，默认为10

pages：总页数

current：当前页码

自定义分页器效果：