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,
})
}
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/66410.html
