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所示。
实现代码如下：
其中layout用来指定分页元件的布局，即定义展示的分页元件及其展示顺序，元件定义如下：
- prev：上一页的按钮。
- pager：页码列表。
- next：下一页的按钮。
- jumper：跳转到。
- total：数据总条数。
- sizes：每页显示的数据条数/分页大小。
- ->：该元件将其右侧的元件包裹起来，整体靠右对齐。
- slot: 额外自定义内容插槽。
其中，各元件用逗号分隔。
layout的值的顺序决定了元件显示的位置，比如：
layout="total,prev,?pager,?next,->,jumper,sizes"这个设置的分页组件元件将按照如图5.22所示的顺序布局。
可以看到，上述layout元件由“→”分隔成左右两边：
- 左边：数据总条数（total）→上一页（prev）→页码列表（pager）→下一页（next）。
- 右边：跳转到→jumper→分页大小sizes。
【例5.18】改变展示的页码数
默认展示的页码数是7，若超过则会折叠页码（以省略号展示），如果要改变默认展示的页码数，则可以在el-pagination标签上指定page-count属性，如展示11个页码数，效果如图5.23所示。
实现代码如下：
【例5.19】带背景色的页码
在el-pagination上添加一个background属性，即可为每个页码添加背景色，效果如图5.24所示。
实现代码如下：
?【例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事件传入的参数是当前每页显示的条数，可以根据当前每页显示的条数向后台获取当前页码的数据。实现代码如下：
定义size-change方法和current-change方法：
const handleSizeChange = (val: number) => {
console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
console.log(`current page: ${val}`)
}至此，常用的Pagination组件的属性和事件方法介绍完毕。接下来通过一个实例来应用这个组件。
-------------------------------------------
本文节选自《Vue 3.x+Element Plus前端开发实战》
本次内容发布，获得作者和出版社授权，供读者个人非商业目的使用。
