关于 ant Design的分页组件的应用

无特殊情况下，Table组件会自动分页，默认每页10条数据。

data:显示的数据

column:为显示的table表格样式

每一列都有一个dateIndex;默认为数据列中相对应的属性值。

例如：const columns = [

{ title: 'Name',

dataIndex: 'name',

render: text => <a href="#">{text}</a>,

},

{ title: 'Age', dataIndex: 'age',},

{ title: 'Address', dataIndex: 'address',}

];

const data = [

{ key: '1', name: 'John Brown', age: 32, address: 'New York No. 1 Lake Park',},

{ key: '2', name: 'Jim Green', age: 42, address: 'London No. 1 Lake Park',},

{ key: '3', name: 'Joe Black', age: 32, address: 'Sidney No. 1 Lake Park',},

];

<Table columns={columns} dataSource={data} />

若需要单独设置每页的页数，可以设置Table的pagination属性，通常有两种获取数据的方式：

onClick(current, pageSize) {
    this.setState({page:current,size:pageSize});
    this.loadData(current,pageSize);
}      

//根据当前页和当前条数，获取相应的数据值，确定重新设置了this.state,保证render能够重新进行渲染。      

//loadData()获取数据的函数。      

let {page, size, total, items} = this.state;      
    
let pagination = {
    total: total,
    defaultCurrent: page,
    pageSize: size,
    showSizeChanger: true,
    onShowSizeChange: (current, pageSize) => {
        this.onClick(current, pageSize)
    },
    onChange:(current, pageSize) => {
        this.onClick(current, pageSize)
    },
}      
    
//二、前端获取      
    
let pagination = {          
    
total: total,      
    
defaultCurrent: page,      
    
pageSize: size,      
    
showSizeChanger: true,      
    
onShowSizeChange: (current, pageSize) => {       
    
},}      
            
<Table bordered columns={columns} dataSource={data} loading=true pagination={pagination}/>