很抱歉,我无法查看图片。但是,我可以为您提供一些建议来实现您所需的功能。
如果您使用的是Ant Design的Table组件,那么可以通过设置pagination属性来实现上一页和下一页的功能。以下是一个示例代码:
```jsx
import React from 'react';
import { Table } from 'antd';
const columns = [
// 您的列定义
];
const dataSource = [
// 您的数据源
];
class MyTable extends React.Component {
state = {
loading: false,
pagination: {
current: 1,
pageSize: 10,
total: dataSource.length,
},
};
handleChangePage = (page) => {
this.setState({
pagination: {
current: page,
pageSize: 10,
},
});
};
handleChangeRowsPerPage = (rowsPerPage) => {
this.setState({
pagination: {
current: 1,
pageSize: rowsPerPage,
},
});
};
render() {
const { loading, pagination, dataSource } = this.state;
return (
<div>
<Table
columns={columns}
dataSource={dataSource}
pagination={pagination}
rowKey="id" // 根据您的数据源定义rowKey属性
/>
{/* 如果需要自定义上一页和下一页按钮的样式,可以使用下面的代码 */}
{/* <Button onClick={this.handleChangePage(pagination.current > 1 && Math.ceil(pagination.total/pagination.pageSize))} style={{ marginRight: '8px'}}>上一页</Button> */}
{/* <Button onClick={this.handleChangePage(pagination.current < Math.ceil(pagination.total/pagination.pageSize))} style={{ marginRight: '8px'}}>下一页</Button> */}
</div>
);
}
}
export default MyTable;
```
这个示例代码使用了Ant Design的Table组件,并通过设置pagination属性来实现上一页和下一页的功能。您可以根据自己的需求进行调整。