element-ui 表格分页功能的实现

Element-UI表格分页实现详解

最新推荐文章于 2025-09-21 20:02:31 发布

原创

最新推荐文章于 2025-09-21 20:02:31 发布 · 3.4k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#element-ui 分页

本文介绍了如何使用Element-UI实现表格分页功能，包括`handleSizeChange`和`handleCurrentChange`两个关键函数的用法。这两个函数分别用于处理每页显示条目数的改变和页面跳转，确保在数据更新时正确地重新渲染表格。

1、概述

在展示表格时，当表格行数过多时，分页时一个常见的需求，如果熟悉element-ui的朋友应该都知道’’ 可以用来分页

2、代码

            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"  //当前页码
              :page-sizes="[5,10,20,50,100]"  //可选的每页展示条目
              :page-size