填坑之路继续哈~
首先来张图，有图有真相
pager.png
不喜就喷哈~
参数
分页需要的字段：当前页(curPage)，每页大小(pageSize)，总页数(total)
作为一个组件，所以以上这些参数最好是从父组件传递过来，可以如下定义：
...
props:[
"pageSize","curPage","total"
]
...
按钮显示
另外还需要用一些属性控制按钮的是否显示，比如：当前为第一页时不显示上一页和首页按钮，当前为最后一页时不显示下一页和尾页按钮：
...
data () {
return {
...
"showFirstPage":true,
"showLastPage":true,
"showPrevPage":true,
"showNextPage":true,
...
}
}
...
页面可以如下设置：
首页
上一页
下一页
尾页
跳转页面大小
页面大小不能用pageSize来控制，需要重新绑定一个变量：
...
data () {
return {
...
"rowNum":this.pageSize
}
}
...
页面部分可以这么写：
显示逻辑：
...
this.showFirstPage = this.curPage> 1
this.showLastPage = this.curPage< this.total
this.showPrevPage = this.curPage> 1
this.showNextPage = this.curPage< this.total
...
页面跳转
当页数太多时，页面跳转就必不可少了，可以使用标签让用户输入，当然需要验证输入是否准确，
首先需要的属性不能少：
...
data () {
return {
"gotoPage":"",
...
}
}
...
页面代码：
跳转
还有，使用前得做判断：
...
if(this.gotoPage && /[1-9][0-9]*/.test(this.gotoPage)){
...
}
...
唉，没口水了。。。其实，说了这么多，就一句话：吾写这份代码不易，希汝珍惜对待 ^_^。。。
好了，关门，放代码：
代码在此
template
script
css
好了，以上就是组件的全部代码
那么父组件该如何调用呢？嘿嘿
分页组件的调用
template
...
其中dataChanged用来刷新组件的，参考：vue强制刷新组件
其中setPage和setRowNum分别对应父组件的方法：gotoPage，changeRowNum，参考：vue2.0父子组件以及非父子组件如何通信
script
import Pager from '@/components/Pager'
...
export default{
...
data(){
return {
curPage:1,//当前页
total:0,//总共页数
pageSize:20,//每页记录数
dataChanged:false
}
},
components:{
"Pager":Pager
}
methods:{
refresh(){//用于刷新组件，需手动调用
this.dataChanged = true
this.$nextTick(() => {
this.dataChanged = false
})
},
gotoPage(page){
...
},
changeRowNum(pageSize){
...
}
}
...
}
好了，真的完了~