1、为什么很多项目采用分页功能,比如电商平台同时展示的数据有很多,如果不采用分页功能可能浏览器加载不出来。ElementUI有相应的分页组件,使用起来超级简单,但是我们先掌握自定义分页的功能。
2、分页器需要哪些数据?
(1)当前是第几页:pageNo字段代表当前页数
(2)每页展示多少数据:pageSize字段代表
(3)需要知道整个分页器一共有多少个数据:total字段代表
(4)需要分页器连续页面个数:5/7【奇数】奇数是对称的
总结:
- pageNo: 代表每一页展示多少数据
- pageSize:代表每一页展示多少条数据
- total:代表整个分页要展示多少条数据
- continues:代表分页连续页码个数
3、自定义分页器,在开发时先用模拟的数据调试,调试成功后再传服务器的数据。
<!-- 分页器 测试分页器阶段,这里数据将来要替换的-->
<Pagination :pageNo="1" :pageSize="3" :total="91" :continues="5"/>
4、对于分页器来说,一个很重要的地方是:算出连续页面起始数字和结束数字。
computed:{
//总共多少页
totalPage(){
//向上取整
return Math.ceil(this.total/this.pageSize)