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

Designer°自立提问于 2026-03-30 10:00:14 阅读 3

组件

我在用Element Plus的Pagination做表格分页，想让用户自己选每页显示多少条，比如10、20、50这样。但文档里没太看懂怎么配置，试了:page-sizes="[10, 20, 50]"好像没生效，下拉框还是默认的那些选项，是我哪里写错了吗？

我的代码大概是这样的：

<el-pagination
  v-model:page-size="pageSize"
  :page-sizes="[10, 20, 50]"
  layout="sizes, prev, pager, next"
  :total="100"
/>

UI组件 Vue组件主题定制

我来解答赞 5 收藏

反馈

1 条解答

UX-欣辰 Lv1

page-sizes要跟layout里的配合，你这配置基本对了，可能是版本问题或者绑定的变量没处理好。直接用这个完整代码：



<template>

  <el-pagination

    v-model:current-page="currentPage"

    v-model:page-size="pageSize"

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

    layout="sizes, prev, pager, next"

    :total="total"

    @size-change="handleSizeChange"

    @current-change="handleCurrentChange"

  />

</template>



<script>

export default {

  data() {

    return {

      currentPage: 1,

      pageSize: 10,

      total: 100

    }

  },

  methods: {

    handleSizeChange(newSize) {

      this.pageSize = newSize

      // 这里重新请求数据

    },

    handleCurrentChange(newPage) {

      this.currentPage = newPage

      // 这里重新请求数据

    }

  }

}

</script>

记得在方法里处理分页变化时的数据请求，不然只是显示条数变了但数据没更新也没意义。有时候这些回调函数容易被忽略，我就踩过坑。

2026-03-30 10:01