1、引入Table 组件
<Table
bordered
loading={ loading }
pagination={ paginationProps }
rowSelection={ rowSelection }
onRowDoubleClick={this.dbClick }
columns={ this.columns }
dataSource={ this.dataSource }
style={{ marginTop: '10px' }}
scroll={{ y: 280 }}
/>
2、定义 pagination 属性
const {
lutList:{ data, page },
loading,
} = this.props;
// 表格数据的总条数
const totals = page.total;
// 表格分页属性
const paginationProps = {
showSizeChanger: true,
showQuickJumper: false,
showTotal: () => `共${totals}条`,
pageSize: this.state.pageSize,
current: page.pageNum,
total: page.total,
onShowSizeChange: (current,pageSize) => this.changePageSize(pageSize,current),
onChange: (current) => this.changePage(current),
};
3、定义 改变页数 和 每页显示的条数 的方法
// 回调函数,切换下一页
changePage(current){
const { dispatch } = this.props;
const params = {
pageNum: current,
pageSize: this.state.pageSize,
};
dispatch({
type: 'lutList/fetch',
payload: params,
})
}
// 回调函数,每页显示多少条
changePageSize(pageSize,current){
// 将当前改变的每页条数存到state中
this.setState({
pageSize: pageSize,
});
// 向后台请求
const { dispatch } = this.props;
const params = {
pageSize: pageSize,
};
dispatch({
type: 'lutList/fetch',
payload: params,
})
}
————————————————
版权声明:本文为CSDN博主「奋斗的吧小菜鸟」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/luzhaopan/article/details/84996507