ant design pro 分页

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_25252769/article/details/79962084

因为Table自带分页,但是是前台分页,获取所有数据,自动分页数据大,不太友好,所以改为单独请求数据。

import { Button, Row, Col, Icon, Steps, Card, Table, Divider, Input, Form, Popconfirm, Modal, message, Menu, DatePicker ,Pagination} from 'antd';

  getPages = (page) => {
    this.setState({loading:true ,page:page})
    this.props.dispatch({
      type: 'confirmOrder/getOrder',
      payload: {
        rows: 10,
        page: page,
      },
    }).then(()=>{
      this.setState({loading:false})
    })
  }


<Table 
        dataSource={data.list} 
        columns={columns} 
        rowKey='agentId' 
        pagination={false} 
        bordered={false} 
        loading={loading}
        />
        <Pagination defaultCurrent={1} total={data.total} onChange={this.getPages} style={{marginTop:"20px",float:"right"}}/>

利用onChange每次点击获取页数,赋值给page,请求时获取就行了。

阅读更多
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页