由於Table自帶分頁,可是是前臺分頁,獲取全部數據,自動分頁數據大,不太友好,因此改成單獨請求數據。web
方式一:antd
import { Button, Row, Col, Icon, Steps, Card, Table, Divider, Input, Form, Popconfirm, Modal, message, Menu, DatePicker ,Pagination} from 'antd'; import { defaultPageSize } from '../../../utils/utils';//defaultPageSize = 8 state={ page:1, searchVal:{} //搜索條件 } getPages = (page) => { let obj ={ rows: defaultPageSize, page: page, } this.setState({loading:true }) this.props.dispatch({ type: 'confirmOrder/getOrder', payload: { rows: 10, page: {...obj ,...this.state.searchVal }, }, }).then(()=>{ this.setState({loading:false ,page:page}) }) } <Table dataSource={data.list} columns={columns} rowKey='agentId' pagination={false} bordered={false} loading={loading} /> <Pagination current={this.state.page} defaultPageSize={defaultPageSize} total={data.total} onChange={this.getPages} style={{marginTop:"20px",float:"right"}}/>
利用onChange每次點擊獲取頁數,賦值給page,請求時獲取就好了。
方式二:ide
//利用Table,分頁(後臺分頁) //Table通常和搜索結合,因此要處理搜索結果分頁 //defaultPageSize全局變量 defaultPageSize = 8 import { defaultPageSize } from '../../../utils/utils';//defaultPageSize = 8 state={ page:1, searchVal:{} //搜索條件 } handlePageChange = (pagination, filters, sorter) => { let val = { rows: defaultPageSize, page: pagination.current?pagination.current:1 } this.setState({page:pagination.current?pagination.current:1}) this.props.dispatch({ type: 'volunteerList/getList', payload: {...val ,...this.state.searchVal }, //若是是搜索結果分頁,須要加上搜索的值 }); } const paginationProps = { pageSize: defaultPageSize, current:this.state.page total: data.total, //後臺讀取的total }; <Table loading={loading} dataSource={data.data} columns={column1} pagination={paginationProps} onChange={this.handlePageChange} />