5.2 Pagination 组件
分页组件通常与表格组件一同使用，在数据量很大的时候，通常不会在表格中一次性显示所有的数据，因为如果所有数据都展示在一个页面，数据量庞大，容易造成浏览器崩溃，就算数据可以完全展示出来，这样的页面也会让用户失去兴趣，而不会全部浏览。所以通常会将数据进行少量展示，分页处理，如果用户感兴趣，则会单击更多的页码进行浏览，这样的界面更加简洁，方便用户，使用户更愿意在页面上停留。
和表格组件一样，分页组件也有其常用的事件和方法，通常也有一套常用的视图表现，如有上一页、下一页、首页、尾页、显示总页数、翻页等。因为使用频繁，Element 也对分页组件进行了封装，并充分考虑了常用的场景，所以也能满足很多常用开发需求。本节将对其常用功能进行介绍。
5.2.1 Pagination 组件的引入方式
Pagination
组件由
import { ElPagination } from 'element-plus'
// app 是Vue.createApp() 创建的应用实例
app.use(ElPagination);
5.2.2 Pagination 组件的用法
分页展示的通常是：数据总条数、每页展示数、上一页、下一页、首页、尾页、页码和跳转页码。下面将展示分页组件的用法。
【例5.17 】基础用法
Pagination 组件的使用非常简单，如果只需要展示页码、上一页和下一页，如图5.21 所示。
图5.21 pagination 组件的基础展示
实现代码如下：
其中layout 用来指定分页元件的布局，即定义展示的分页元件及其展示顺序，元件定义如下：
l prev ：上一页的按钮。
l pager ：页码列表。
l next ：下一页的按钮。
l jumper ：跳转到。
l total ：数据总条数。
l sizes ：每页显示的数据条数/ 分页大小。
l -> ：该元件将其右侧的元件包裹起来，整体靠右对齐。
l slot: 额外自定义内容插槽。
其中，各元件用逗号分隔。
layout 的值的顺序决定了元件显示的位置，比如：
layout="total,prev, pager, next,->,jumper,sizes"
这个设置的分页组件元件将按照如图5.22 所示的顺序布局。
图5.22 Pagination 元件布局
可以看到，上述layout 元件由“→”分隔成左右两边：
l 左 边 ： 数据总条数（total ） → 上一页（prev ） → 页码列表（pager ） → 下一页（next ）。
l 右 边 ： 跳转到 →jumper → 分页大小sizes 。
【例5.18 】改变展示的页码数
默认展示的页码数是7 ，若超过则会折叠页码（以省略号展示），如果要改变默认展示的页码数，则可以在el-pagination 标签上指定page-count 属性，如展示11 个页码数，效果如图5.23 所示。
图5.23 Pagination 改变页码数
实现代码如下：
【例5.19 】带背景色的页码
在el-pagination 上添加一个background 属性，即可为每个页码添加背景色，效果如图5.24 所示。
图5.24 Pagination 带背景色的页码效果
实现代码如下：
【例5.20 】小型分页
如果空间有限或者小屏幕中使用分页组件，则可以通过配置small 属性缩小分页组件的大小，实现代码如下：
【例5.21 】只有一页时隐藏分页
页码只有一页时，显示页码会显得很单调，且页面不协调，此时隐藏起来会更好，只需在el-pagination 上添加hide-on-single-page 属性即可实现，实现代码如下：
【例5.22 】改变每页展示的条数
默认每页展示10 条数据，如果需要更改，则只需在el-pagination 上添加page-size 属性即可，其值是一个数字，如每页展示20 条数据，实现代码如下：
【例5.23 】改变可选择的每页展示的条数
默认可选择的每页展示的条数是10,20,30,40,50,100 ，要改变的话，只需在el-pagination 上添加page-sizes 属性，值为一个数字数组。例如更改为展示100,200,300 ，默认每页展示10 条，所以要指定每页展示的条数为100 ，实现代码如下：
【例5.24 】分页组件事件
分页组件的事件用得最多的就是当前页码切换事件（current-change ）和每页显示条数变更事件（size-change ）。current-change 事件传入当前页码，可以根据当前页码向后台获取当前页码的数据。size-change 事件传入的参数是当前每页显示的条数，可以根据当前每页显示的条数向后台获取当前页码的数据。实现代码如下：
v-model:currentPage="currentPage4" :page-sizes="[100, 200, 300, 400]" :page-size="100" layout="total, sizes, prev, pager, next, jumper" :total="400" @size-change="handleSizeChange" @current-change="handleCurrentChange" >
定义size-change
方法和current-change
方法： const handleSizeChange = (val: number) => { console.log(`${val} items per page`) } const handleCurrentChange = (val: number) => { console.log(`current page: ${val}`) }
至此，常用的Pagination
组件的属性和事件方法介绍完毕。接下来通过一个实例来应用这个组件。
