antd分页demo
import React, { Component } from 'react';
import { Pagination } from 'antd';
class ReplaceQRCode extends Component {
state = {
showList: [],
allList: [],
total: 100,
pageSize: 10,
pageCurrent: 1,
};
componentDidMount() {
const { pageCurrent, pageSize } = this.state;
let arr = [];
let showArr = [];
for (var i = 1; i <= 97; i++) {
arr.push(i);
}
showArr = arr.slice((pageCurrent - 1) * pageSize, pageCurrent * pageSize);
this.setState({
allList: arr,
showList: showArr,
});
console.log(arr);
}
onShowSizeChange = (current, pageSize) => {
const { allList } = this.state;
let showArr = [];
showArr = allList.slice((current - 1) * pageSize, current * pageSize);
console.log(showArr);
this.setState({
showList: showArr,
pageCurrent: current,
pageSize,
});
};
render() {
const { showList } = this.state;
return (
<div>
<ul>
{showList.map((item, index) => {
return <li key={index}>{item}</li>;
})}
</ul>
<Pagination onChange={this.onShowSizeChange} defaultCurrent={1} total={this.state.total} />
</div>
);
}
}
export default ReplaceQRCode;