reactjs - 如何以编程方式导航到 antd 表格组件的最后一页或第 n 页？

Question

我正在使用分页组件向 antd 表格组件添加一个新项目，并希望将表格内容导航到分页中的最后一页或第 n 页。如何使用 antd 分页以编程方式导航到 antd 表格组件的最后一页或第 n 页？

Answer 1

您可以通过控制它Table[pagination]，请参阅：https ://ant.design/components/table/#Table

Answer 2

这就是我解决它的方法：

1）将分页对象添加到组件状态

constructor(props) {
        super(props);

        this.state =
            {
                pagination: null,
            };
    }

2）将分页从组件状态传递到组件渲染方法中的表格分页道具：

    ...
    <Table
        dataSource={dataSource}
        ...
        pagination={this.state.pagination}
    />
    ...

3) 在您选择的组件事件处理程序中，您现在可以使用 SetState 设置分页对象。例如，在将新项目添加到表格后，我导航到分页的最后一页：

handleCreateItem = () => {
        ...
        let pagination = {
            current: YourNewCurrentPageInPagination,
            maxSize: YourNewMaxSizeGridValue
        }
        ...
        this.setState({
            pagination: pagination
        })
        ...
}