easymock+ react + antd 快速开发一个表格分页的效果

介绍：

1. Easy Mock 是一个可视化，并且能快速生成 模拟数据 的持久化服务。 
2. react 现今流行的前端开发框架
3. antd reactUI组件库，可以用于快速开发企业级后台平台。
   
   
    

效果：

 

代码：

展示部分：

                <Card
                    title="表格分页"
                >
                    <Table
                        columns={this.columns} dataSource={this.state.mockData} pagination={this.state.pagination} />
                </Card>

    columns = [
        {
            title: 'Id',
            dataIndex: 'id',
            key: 'id',
        },
        {
            title: 'Username',
            dataIndex: 'username',
            key: 'username',
        },
        {
            title: 'Sex',
            dataIndex: 'sex',
            key: 'sex',
        },
        {
            title: 'State',
            dataIndex: 'state',
            key: 'state',
        },
        {
            title: 'Date',
            dataIndex: 'date',
            key: 'date',
        }, 
        {
            title: 'Email',
            dataIndex: 'email',
            key: 'email',
        },
        {
            title: 'Province',
            dataIndex: 'province',
            key: 'province',
        },
        {
            title: 'City',
            dataIndex: 'city',
            key: 'city',
        }, 
        {
            title: 'County',
            dataIndex: 'county',
            key: 'county',
        }];

    componentDidMount(){
        this.request()
        console.log(this.state.mockData)
    }
    request = () => {
        let baseUrl = 'https://www.easy-mock.com/mock/5c84ba14cfb6692c29516334/mockapi'
        axios.get(baseUrl+'/table/list').then((res) => {
            if (res.data.code === 0 && res.status === 200){
                this.setState({
                    mockData: res.data.result.list,
                    pagination: utils.pagination(res.data,(page)=>{
                        console.log(page);
                        this.mockPagination(page)
                    })
                })
            }
        })
    }
    mockPagination = (page) => {
        let baseUrl = 'https://www.easy-mock.com/mock/5c84ba14cfb6692c29516334/mockapi'
        axios.post(baseUrl + `/table/list2?page=${page}`).then((res) => {
            if (res.data.code === 0 && res.status === 200) {
                this.setState({
                    mockData: res.data.result.list,
                    pagination: utils.pagination(res.data, (cur) => {
                        this.mockPagination(cur)
                    })
                })
            }
        })
    }

utils.pagination： 分页组件的封装

export default {
    pagination(data,callback) {
        return {
            onChange: function(current) {
                callback(current)
            },
            current: data.result.page,
            pageSize: data.result.page_size,
            total: data.result.total_count,
            showTotal: () => {
                return `共${data.result.total_count}条`
            },
            showQuickJumper: true
        }
    }
}