这是一个是基于element-UI
的分页组件基础上,进行了二次封装的分页组件,在展示数据时,该分页组件采用了每显示一页数据,只请求当前页面的数据的请求策略,从而避免了一次性将数据全部请求所造成的资源浪费。
使用方法
由于该组件是基于element-UI
的分页组件进行二次封装,所以在使用该组件时请务必安装element-UI
(),安装好element-UI
后,只需将该组件文件夹Pagination
导入到现有项目中即可使用。
1 23 4
选项
属性 | 描述 | 类型 | 默认值 | 是否必须 |
---|---|---|---|---|
total | 数据总数 | Number | 0 | 是 |
page | 当前页码 | Number | 1 | 是 |
limit | 每页显示数据条目个数 | Number | 10 | 是 |
pageSizes | 每页显示个数选择器的选项设置 | Array | [10,20,30] | 否 |
layout | 组件布局 | String | 'total, sizes, prev, pager, next, jumper' | 否 |
background | 是否为分页按钮添加背景色 | Boolean | true | 否 |
效果图
完整代码请戳☞
(完)