AntD Table点击分页时实现页面顶部滚动需求

因为你设置了pagination={false}，需要通过自定义分页组件实现点击分页时页面滚动到顶部的效果，具体实现如下：

• 引入AntD的Pagination组件
• 维护当前页码的状态
• 在分页切换回调中，更新页码并触发页面滚动至顶部

完整代码示例：

import { Table, Pagination } from 'antd';
import { useState } from 'react';

const YourComponent = () => {
  const [currentPage, setCurrentPage] = useState(1);
  // 可根据实际需求调整每页条数
  const pageSize = 10;

  // 处理分页切换逻辑
  const handlePageChange = (page) => {
    setCurrentPage(page);
    // 滚动至页面顶部，behavior: 'smooth' 实现平滑滚动，可移除该参数
    window.scrollTo({
      top: 0,
      behavior: 'smooth'
    });
  };

  // 根据当前页码截取对应数据源，需结合你的业务逻辑调整
  const paginatedData = fixedData.slice(
    (currentPage - 1) * pageSize,
    currentPage * pageSize
  );

  return (
    <>
      <Table
        columns={fixedColumns}
        dataSource={paginatedData}
        pagination={false}
        scroll={{ x: 2000, y: 500 }}
        bordered
        summary={() => (
          <Table.Summary fixed>
            <Table.Summary.Row>
              <Table.Summary.Cell index={0}>Summary</Table.Summary.Cell>
              <Table.Summary.Cell index={1}>
                This is a summary content
              </Table.Summary.Cell>
            </Table.Summary.Row>
          </Table.Summary>
        )}
      />
      {/* 自定义分页组件，样式可根据页面布局调整 */}
      <div style={{ textAlign: 'right', marginTop: 16 }}>
        <Pagination
          current={currentPage}
          pageSize={pageSize}
          total={fixedData.length}
          onChange={handlePageChange}
        />
      </div>
    </>
  );
};

export default YourComponent;

关键说明 #

• 数据源分页逻辑：根据currentPage和pageSize对完整数据fixedData进行切片，得到当前页展示的数据
• 滚动操作：window.scrollTo直接触发页面回到顶部，平滑滚动效果可通过behavior参数控制
• 分页组件样式：示例中设置为表格下方居右展示，可根据你的页面布局自行调整

内容的提问来源于stack exchange，提问作者Han KIen