分页组件通常与表格组件一同使用，在数据量很大的时候，通常不会在表格中一次性显示所有的数据，因为如果所有数据都展示在一个页面，数据量庞大，容易造成浏览器崩溃，就算数据可以完全展示出来，这样的页面也会让用户失去兴趣，而不会全部浏览。

所以通常会将数据进行少量展示，分页处理，如果用户感兴趣，则会单击更多的页码进行浏览，这样的界面更加简洁，方便用户，使用户更愿意在页面上停留。和表格组件一样，分页组件也有其常用的事件和方法，通常也有一套常用的视图表现，如有上一页、下一页、首页、尾页、显示总页数、翻页等。因为使用频繁，Element也对分页组件进行了封装，并充分考虑了常用的场景，所以也能满足很多常用开发需求。本节将对其常用功能进行介绍。

1. Pagination组件的引入方式
Pagination组件由标签组成。el-pagination具有多种属性、插槽和事件，主要控制表格整体。el-column同样有多种属性，主要控制表格各列的配置。两种标签配合使用，让Table支持行列合并、树形展示等相对复杂且常用的功能。如果是全局引入了Element Plus，则可以直接在组件或页面中使用和标签并配置标签属性的事件和方法，以展示表格数据。如果使用按需引入方式，则需要将Table组件和TableColumn组件按如下方式先引入：

import { ElPagination } from 'element-plus' 
// app是Vue.createApp()创建的应用实例
app.use(ElPagination);

2. Pagination组件的用法
分页展示的通常是：数据总条数、每页展示数、上一页、下一页、首页、尾页、页码和跳转页码。下面将展示分页组件的用法。
基础用法
Pagination组件的使用非常简单，如果只需要展示页码、上一页和下一页，如图5.21所示。

实现代码如下：

<el-pagination layout="prev, pager, next,jumper,sizes,total" :total="1000"></el-pagination>

其中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所示。

实现代码如下：

<el-pagination layout="prev, pager, next,jumper,total" :total="1000" :pager-count="11"></el-pagination>

【例5.19】带背景色的页码 在el-pagination上添加一个background属性，即可为每个页码添加背景色，效果如图5.24所示。

实现代码如下：

 <el-pagination layout="prev, pager, next,jumper,total" :total="1000" background ></el-pagination>

【例5.20】小型分页 如果空间有限或者小屏幕中使用分页组件，则可以通过配置small属性缩小分页组件的大小，实现代码如下：

<el-pagination small layout="prev, pager, next" :total="50"> </el-pagination>

【例5.21】只有一页时隐藏分页 页码只有一页时，显示页码会显得很单调，且页面不协调，此时隐藏起来会更好，只需在el-pagination上添加hide-on-single-page属性即可实现，实现代码如下：

<el-pagination layout="prev, pager, next,jumper,total" :total="1000"  hide-on-single-page></el-pagination>

【例5.22】改变每页展示的条数 默认每页展示10条数据，如果需要更改，则只需在el-pagination上添加page-size属性即可，其值是一个数字，如每页展示20条数据，实现代码如下：

<el-pagination layout="prev, pager, next" :total="1000" :page-size="20" ></el-pagination>

【例5.23】改变可选择的每页展示的条数 默认可选择的每页展示的条数是10,20,30,40,50,100，要改变的话，只需在el-pagination上添加page-sizes属性，值为一个数字数组。例如更改为展示100,200,300，默认每页展示10条，所以要指定每页展示的条数为100，实现代码如下：

<el-pagination layout="prev, pager, next" :total="1000" :page-sizes="[100,200,300]" ></el-pagination>

【例5.24】分页组件事件 分页组件的事件用得最多的就是当前页码切换事件（current-change）和每页显示条数变更事件（size-change）。current-change事件传入当前页码，可以根据当前页码向后台获取当前页码的数据。size-change事件传入的参数是当前每页显示的条数，可以根据当前每页显示的条数向后台获取当前页码的数据。实现代码如下：

<el-pagination
      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"
    >
    </el-pagination>

定义size-change方法和current-change方法：

// 堆代码 duidaima.com
const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
}

至此，常用的Pagination组件的属性和事件方法介绍完毕。接下来通过一个实例来应用这个组件。