使用Vue实现一个分页组件 | vue分頁
分页是WEB开发中很常用的功能,尤其是在各种前后端分离的今天,后端API返回数据,前端根据数据的count以及当前页码pageIndex来计算分页页码并渲染到页面上已经是一个很普通很常见的功能了。从最开始的jquery时代到现在的各种各样的前端框架时代,分页功能都是必不可少的。分页大多数(基本上)情况下都是对异步数据列表的处理,这里首先需要明白一下分页的流程。在已知每页显示数据量pageSize以及当前页码pageIndex的情况下:请求API,返回第一屏数据(pageSize内)以及所有相关条件的数据总量count将数据总量传递给page组件,来计算...
分页是WEB开发中很常用的功能,尤其是在各种前后端分离的今天,后端API返回数据,前端根据数据的count以及当前页码pageIndex来计算分页页码并渲染到页面上已经是一个很普通很常见的功能了。从最开始的jquery时代到现在的各种各样的前端框架时代,分页功能都是必不可少的。分页大多数(基本上)情况下都是对异步数据列表的处理,这里首先需要明白一下分页的流程。在已知每页显示数据量pageSize以及当前页码pageIndex的情况下:
请求API,返回第一屏数据(pageSize内)以及所有相关条件的数据总量count
将数据总量传递给page组件,来计算页码并渲染到页面上
点击页码,发送请求获取该页码的数据,返回数据总量count以及该页码下的数据条目。
由于获取数据条件的变化(假设是个搜索,关键词变了),count是不定的;再或者,有个select下拉框,来控制每页显示的数据量pageSize,当它变化的时候,总页码肯定也是要变化的。因此很多情况下要重新计算页码并渲染。
了解了流程,在Vue中实现一个分页组件也就变得简单了。
简单处理,样式类似于bootstrap的分页组件,在第一页时,禁用上一页,以及首页按钮;在最后一页时,禁用下一页,一节尾页按钮;超出范围的页码以...来代替,效果图如下:
分页组件 template <template> <ul class="mo-paging"> <!-- prev --> <li :class="[paging-item, paging-item--prev, {paging-item--disabled : index === 1}]" @click="prev">prev</li> <!-- first --> <li :class="[paging-item, paging-item--first, {paging-item--disabled : index === 1}]" ...