Vue快速构建实现分页效果

　　在vue项目中，我们经常会需要展示大量数据，这就容易造成网页的卡顿和数据请求过慢。为了提高请求速度和优化用户体验，我们就需要用到分页效果，而前端为了配合后端的分页效果，通常需要先实现一个分页组件，来配合后端实现分页效果。
　　本次实现分页组件主要基于 zoom-design组件 ，该组件提供了pager分页组件，方便我们快速构建；

效果图

首先我们先看看实现后的效果图

安装组件

在项目的根目录下运行命令

	npm install zoom-design --save

引入组件

在main.js文件中

   import zoomUI from 'zoom-design';
   import 'zoom-design/lib/zoom-design.css';

   Vue.use(zoomUI);

使用组件

接下来可以去到要使用组件的地方

<template>
  <div>
     <zoom-pager :op="pagerOp"></zoom-pager>
   </div>
 </template>
 <script>
   export default {
     data() {
       return {
         pagerOp: {
           pageSizes: [5, 10, 20],	// 可选择每页展示数量
           mode: 'Number',	// 展示模式 mini为简单版, Number为完全版 默认Number
           pageVal: {
             total: 100,	// 总条数
             curPage: 3,	// 展示的当前页
             pageSize: 20	// 每页要展示多少条数据
           },
           pageSizeSkip: (val, pageVal) => {
             this.pageSize = val;	// 每页大小的下拉框数据发生改变事件
           },
           skip: (val, pageVal) => {
             console.log('当前页是',val);	//点击跳转触发获取当前页
             console.log('分页数据是', pageVal); //  分页的数据
           }
         }
       }
     }
   }
 </script>

这样分页效果就已经出来了，需要和后端联动的话，在data里定义的skip 函数中, 可以监听到分页的变化, 其中第一个参数val是跳转后的当前页，pageVal 则是分页数据， 返回的是一个对象：

curPage是当前页， pageSize是当前页展示的数据条数，通过ajax方法传给后台就可以了。
　　如果需要动态设置分页组件的数据， 可以通过标签绑定ref属性，然后调用方法ref, this.$refs[“绑定的属性”].load(pageVal)，pageVal为对象，主要包含curPage, pageSize, total这三个参数。curPage是当前页，pageSize是分页大小，total是分页总数。
　　到此一个简单的分页组件功能就实现了。大家在使用过程中如果有遇到什么问题，欢迎在下方留言！