antd ProTable使用分页

最新推荐文章于 2023-12-05 17:35:27 发布

原创最新推荐文章于 2023-12-05 17:35:27 发布 · 1.6k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端

本文详细介绍了如何在Ant Design Pro Table中实现分页功能，包括配置分页组件、处理分页数据以及优化用户体验等方面，帮助前端开发者更好地理解和运用这一强大的表格组件。

index.js:1 Warning: [antd: Table] `dataSource` length is less than `pagination.total` but large than `pagination.pageSize`. Please make sure your config correct data with async mode.

在这里插入图片描述

const [pageSize, setPageSize] = useState(10)

  return (
    <PageContainer >
      <ProTable
        columns={tableColumn(props, formRef, setIsShow, setCurrentRow)}
        actionRef={actionRef}
        rowKey="id"
        pagination={{
          pageSize,
          showSizeChanger: true,
        }}
        request={(params) =>
          dispatch({
            type: 'InspectPlan/getPatrolPlanList',
            params,
          })
        }
        onChange={({ pageSize }) => setPageSize(pageSize)} // 在切换时需手动修改
      />
    </PageContainer>
  );