Pagination 分页

基于element-plus pagination组件的二次封装。将分页数据直接进行双向绑定，简化事件操作。以下为基本使用，一般搭配表格或列表使用。

基础用法

附加功能

根据场景需要，可以添加其他功能模块。

此示例是一个完整的用例。 使用了 @update:page-size 和 @update:current-page 事件来处理页码大小和当前页变动时候触发的事件。 page-sizes 接受一个整数类型的数组，数组元素为展示的选择每页显示个数的选项，[10, 20, 50, 100, 200] 表示5个选项，每页显示 10 个，20 个，50 个，100个或者200 个。

属性

属性名	说明	类型	是否拓展	默认值
v-model:page-size	每页显示条目个数	number	否	-
v-model:page-current	当前页数	number	否	-
size el^2.7.6	单选框的尺寸	enum	否	default
background	是否为分页按钮添加背景色	boolean	否	false
default-page-size	每页默认的条目个数，不设置时默认为10	number	否	-
total	总条目数	number	否	0
page-count	总页数， total 和 page-count 设置任意一个就可以达到显示页码的功能；如果要支持 page-sizes 的更改，则需要使用 total 属性	number	否	—
pager-count	设置最大页码按钮数。 页码按钮的数量，当总页数超过该值时会折叠	enum	否	7
default-current-page	当前页数的默认初始值，不设置时默认为 1	number	否	-
layout	组件布局，子组件名用逗号分隔	enum	否	total, sizes, prev, pager, next, jumper
page-sizes	每页显示个数选择器的选项设置	number[]	否	[10, 20, 50, 100]
popper-class	每页显示个数选择器的下拉框类名	string	否	''
prev-text	替代图标显示的上一页文字	string	否	''
prev-icon	上一页的图标， 比 prev-text 优先级更高	enum	否	ArrowLeft
next-text	替代图标显示的下一页文字	string	否	''
next-icon	下一页的图标， 比 next-text 优先级更低	enum	否	ArrowRight
disabled	是否禁用分页	boolean	否	false
teleported	是否将下拉菜单teleport至 body	boolean	否	true
hide-on-single-page	是只有一页时是否隐藏	boolean	否	false

事件

事件名	说明	类型	是否拓展
update:page-size	监听每页显示条目个数变更	Function	否
update:current-page	监听当前页数变更	Function	否