Arco Design 分页组件怎么自定义每页显示数量？

子轩 Dev 提问于 2026-03-30 11:13:12 阅读 4

组件

我用 Arco Design 的 Pagination 组件，想让用户自己选每页显示 10、20、50 条，但文档看得有点懵。

试过加 showPageSize 属性，但根本没反应，控制台也没报错，就是下拉框出不来。是不是漏了啥配置？

现在代码大概是这样：

<Pagination
  total={100}
  current={1}
  showPageSize
/>

我来解答赞 1 收藏

反馈

1 条解答

俊含 Lv1

根本原因是 showPageSize 属性只是开启分页选项的开关，但还需要指定具体可选的数量列表。Arco Design 的 Pagination 组件默认不会自动显示下拉选项，需要明确设置 pageSizeOptions。

首先在组件中加入 pageSizeOptions 属性，定义用户可以选择的每页显示数量：

<Pagination

  total={100}

  current={1}

  pageSizeOptions={['10', '20', '50']} // 这里是关键配置

  showPageSize // 开启分页选项功能

/>

注意这里的细节：pageSizeOptions 需要传入字符串数组而不是数字数组，这是 Arco Design 的设计规范，虽然有点奇怪但确实如此。

另外还得处理 onChange 和 onShowSizeChange 回调函数，来获取用户的分页选择：

<Pagination

  total={100}

  current={currentPage}

  pageSize={currentPageSize}

  pageSizeOptions={['10', '20', '50']}

  showPageSize

  onChange={(newPage) => { console.log('新的页码:', newPage); }}

  onShowSizeChange={(pageSize, newPage) => {

    // 更新当前页和每页显示数量

    console.log('新的每页数量:', pageSize, '新的页码:', newPage);

  }}

/>

这样就能完整实现自定义分页数量的功能了。原理其实很简单，就是通过这两个回调函数同步更新页面状态。不过这种设计确实容易让人忽略细节，开发时得特别注意这些小坑。

2026-03-30 11:19