Ant design pro 中使用Table实现内容为零时动态翻页功能

列表数据在 dataSource={this.state.list} 中可自己调用添加 需要自己调接口并把数值赋值给list

import React from 'react';
import { connect } from 'dva';
import { Table, Row, Col, Button } from 'antd';

// eslint-disable-next-line react/prefer-stateless-function
class Once extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            pagination: {
                pageSize: 10,
                pageNumber: 1,
            },
            list: [],
        }
    }

    componentDidMount() {
        this.query();
    }

    //当页码切换的时候触发
    pageNumChange = ({ pageSize, current }) => {
        const pagination = this.state.pagination;
        pagination.pageSize = pageSize;
        pagination.pageNumber = current;
        this.setState({
            pagination
        })
        this.query({ pageSize, pageNumber: current })
    }

    //点击查询按钮调用查询接口 
    //在component中运行 点击后再次运行并携带参数page
    query = () => {
        //调用----我提交的请求列表
        const pagination = this.state.pagination;
        pagination.pageNumber = res.data.pageNumber;//请求数据的当前页码
        pagination.pageSize = res.data.pageSize;//每页多少条数据
        pagination.current = res.data.pageNumber;//当前页数
        console.log(res.data.list, "我是数据")

        //如果页面信息为空 跳到上一页
        if (!res.data.list[0] && pagination.pageNumber !== 1) {
            pagination.current = pagination.current - 1;
            this.query({ pageSize: pagination.pageSize, pageNumber: pagination.current })
        }

        console.log(pagination.current, "我是当前页数")


        //数据总数
        pagination.total = res.data.totalRow;
        this.setState({
            list: res.data.list,
            pagination
        })

    }

    render() {

        const columns = [
            {
                title: '流程号',
                dataIndex: 'id',
                key: 'id',
                render: text => <a>{text}</a>,
            },
            {
                title: '日期',
                dataIndex: 'createTime',
                key: 'createTime',
            },
            {
                title: '期次年月',
                dataIndex: 'yearMonth',
                key: 'yearMonth',
            },
            {
                title: '部门',
                dataIndex: 'departmentNum',
                key: 'departmentNum',
            },
            {
                title: '金额',
                dataIndex: 'appliyingBudget',
                key: 'appliyingBudget',
            },
            {
                title: '状态',
                dataIndex: 'status',
                key: 'status',
                render: (text, record) => {
                    return states[text - 1];
                }
            },
            {
                title: '操作',
                key: 'handle',
                render: (text, record) => (
                    <span>
                        <Button type="primary">详情</Button>
                    </span>
                ),
            },
        ];
        return (
            <div>
                <Row style={{ backgroundColor: '#fff', padding: '10px' }}>
                    <Col span={24}>
                        <Table
                            rowKey={(record) => { return record.id }}
                            columns={columns}
                            dataSource={this.state.list}
                            onChange={this.pageNumChange} pagination={this.state.pagination}
                        />
                    </Col>
                </Row>
            </div>
        );
    }
}
export default Once;