Element Plus分页组件怎么自定义每页显示数量？

♫恒宇提问于 2026-03-23 08:18:19 阅读 7

组件

我在用Element Plus的Pagination组件，想让用户能自己选每页显示10、20、50条，但不知道咋配置。试过加page-sizes属性，但没生效，控制台也没报错，就是下拉框出不来。

我的代码大概是这样：

<el-pagination
  v-model:page-size="pageSize"
  :total="total"
  layout="sizes, prev, pager, next"
/>

我来解答赞 1 收藏

反馈

1 条解答

小燕燕 Lv1

你这代码看起来差不多了，就是少了 page-sizes 属性的值。你需要在 page-sizes 里指定用户可以选择的每页显示数量，比如这样：


  v-model:page-size="pageSize"

  :total="total"

  layout="sizes, prev, pager, next"

  :page-sizes="[10, 20, 50]"

/>

注意 page-sizes 要绑定成一个数组，里面放你想要提供的选项。这样下拉框就能出来了。记得检查一下 pageSize 是否已经缓存起来，确保它是响应式的，这样才能动态更新页面显示的数据量。

2026-03-23 09:02