Element Plus的Pagination 组件用法
发布网友
发布时间：2024-09-28 01:35
共1个回答
热心网友
时间：2024-10-28 01:19
和表格组件一样，分页组件也有其常用的事件和方法，通常也有一套常用的视图表现，如有上一页、下一页、首页、尾页、显示总页数、翻页等。因为使用频繁，Element也对分页组件进行了封装，并充分考虑了常用的场景，所以也能满足很多常用开发需求。本节将对其常用功能进行介绍。
Pagination组件由标签组成。el-pagination具有多种属性、插槽和事件，主要控制表格整体。el-column同样有多种属性，主要控制表格各列的配置。两种标签配合使用，让Table支持行列合并、树形展示等相对复杂且常用的功能。如果是全局引入了Element Plus，则可以直接在组件或页面中使用和标签并配置标签属性的事件和方法，以展示表格数据。如果使用按需引入方式，则需要将Table组件和TableColumn组件按如下方式先引入：
分页展示的通常是：数据总条数、每页展示数、上一页、下一页、首页、尾页、页码和跳转页码。下面将展示分页组件的用法。
【例5.17】基础用法
Pagination组件的使用非常简单，如果只需要展示页码、上一页和下一页，如图5.21所示。
实现代码如下：
其中layout用来指定分页元件的布局，即定义展示的分页元件及其展示顺序，元件定义如下：
其中，各元件用逗号分隔。
layout的值的顺序决定了元件显示的位置，比如：
这个设置的分页组件元件将按照如图5.22所示的顺序布局。
可以看到，上述layout元件由“→”分隔成左右两边：
【例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事件传入的参数是当前每页显示的条数，可以根据当前每页显示的条数向后台获取当前页码的数据。实现代码如下：
至此，常用的Pagination组件的属性和事件方法介绍完毕。接下来通过一个实例来应用这个组件。
-------------------------------------------
本文节选自《Vue.js 3.x+Element Plus前端开发实战》
本次内容发布，获得作者和出版社授权，供读者个人非商业目的使用。
Vue.js 3.x+Element Plus前端开发实战（Web前端技术丛书） - 京东
Vue.js 3.x+Element Plus前端开发实战 - 当当
