今天用vue来实现一个分页组件，总体来说，vue实现比较简单，样式部分模仿了elementUI。所有代码的源码可以再github上下载的到：下载地址 先来看一下实现效果：
点击查看效果
整体思路
我们先看一下使用到的文件的目录：
我们在
pageComponentsTest.vue 页面引入了
pageComponent.vue 分页组件。整体思路是通过 props来达到组件的灵活通用的效果，整体语法是使用vue的VM语法。
pageComponent.vue实现
首先实现一个分页，需要知道数据总条数，一个页面显示的数据条数和当前显示第几页的数据。那么我们在
pageComponent.vue 里面的 props 就有了。看下面的代码：
props: {
// 分页配置
pageConfig: {
type: Object, require: true, default() {
return {
pageSize: 10, //一页的数据条数
pageNo: 0, //当前页的索引
total: 0, //总的数据条数
pageTotal: 0 //总的页数
}
}
}根据用户入参，我们可以使用计算属性来计算一个总页数的变量：
computed: {
//计算总页数，如果传了pageTotal,直接取pageTotal的值，如果传了total，那么根据pageSize去计算
pageTotal(){
const config = this.pageConfig
if(config.pageTotal){
return config.pageTotal
}else {
if(config.pageSize && config.total){
return Math.ceil(config.total/config.pageSize)
}else {
return 0
}
}
}
}有了总页数，和当前页，就需要各种判断来实现我们的html部分了，这里分4中情况
总页数小于8，只需要直接遍历到8就行了。
总页数大于8，但当前页小于4的。
总页数大于8，当前页靠后的。
总页数大于8，当前页在中间的。
下面看具体的实现：
<!--上一页-->
<button @click="prePage" :disabled="currentPage === 1">上一页</button>
<!--总页数小于8的-->
<template v-if="pageTotal <= showPageNo">
<button v-for="i in pageTotal" @click="changeCurrentPage(i)" :class="{active:i === currentPage}" :key="i">{{i}}</button>
