vue实现分页组件

填坑之路继续哈~

首先来张图,有图有真相

pager.png

不喜就喷哈~

参数

分页需要的字段:当前页(curPage),每页大小(pageSize),总页数(total)
作为一个组件,所以以上这些参数最好是从父组件传递过来,可以如下定义:

...
props:[
      "pageSize","curPage","total"
]
...

按钮显示

另外还需要用一些属性控制按钮的是否显示,比如:当前为第一页时不显示上一页和首页按钮,当前为最后一页时不显示下一页和尾页按钮:

...
    data () {
        return {
                       ...
            "showFirstPage":true,
            "showLastPage":true,
            "showPrevPage":true,
            "showNextPage":true,
                      ...
        }
    }
...

页面可以如下设置:

<a href="javascript:void(0);" v-show="showFirstPage">首页</a>
<a href="javascript:void(0);" v-show="showPrevPage" >上一页</a>
<a href="javascript:void(0);" v-show="showNextPage" >下一页</a>
<a href="javascript:void(0);" v-show="showLastPage" >尾页</a>

跳转页面大小

页面大小不能用pageSize来控制,需要重新绑定一个变量:

...
data () {
   return {
       ...
      "rowNum":this.pageSize
    }
}
...

页面部分可以这么写:

<select v-model="rowNum">
    <option value="10">10</option>
    <option selected="selected" value="20">20</option>
    <option value="50">50</option>
    <option value="100">100</option>
</select>

显示逻辑:

...
    this.showFirstPage = this.curPage> 1
    this.showLastPage = this.curPage< this.total
    this.showPrevPage = this.curPage> 1
    this.showNextPage = this.curPage< this.total
...

页面跳转

当页数太多时,页面跳转就必不可少了,可以使用<input>标签让用户输入,当然需要验证输入是否准确,
首先需要的属性不能少:

...
data () {
        return {
            "gotoPage":"",
                    ...
          }
}
...

页面代码:

<input type="text" v-model="gotoPage" />
<a href="javascript:void(0);"  >跳转</a>

还有,使用前得做判断:

...
if(this.gotoPage && /[1-9][0-9]*/.test(this.gotoPage)){
...
}
...

唉,没口水了。。。其实,说了这么多,就一句话:吾写这份代码不易,希汝珍惜对待 ^_^。。。
好了,关门,放代码:

代码在此

template

<template>
    <div class="pager">     
        <a href="javascript:void(0);" v-show="showFirstPage" v-on:click="firstPage" >首页</a>
        <a href="javascript:void(0);" v-show="showPrevPage" v-on:click="prevPage" >上一页</a>
        <a href="javascript:void(0);" v-show="showNextPage" v-on:click="nextPage" >下一页</a>
        <a href="javascript:void(0);" v-show="showLastPage" v-on:click="lastPage" >尾页</a>
        <div>
            <select v-model="rowNum">
                <option value="10">10</option>
                <option selected="selected" value="20">20</option>
                <option value="50">50</option>
                <option value="100">100</option>
            </select>
        </div>      
        <span>{{curPage}}/{{total}}</span>
        <div class="goto">
            <input type="text" v-model="gotoPage" />
            <a href="javascript:void(0);" v-on:click="gotoNextPage" >跳转</a>
        </div>
    </div>
</template>

script

<script>
export default {
    mounted() {
        this.$nextTick(() => { this.initPager() }) //需要延迟初始化
    },
    name: 'Pager',
    data () {
        return {
            "gotoPage":"",
            "showFirstPage":true,
            "showLastPage":true,
            "showPrevPage":true,
            "showNextPage":true,
            "rowNum":this.pageSize
        }
    },
    methods:{
        nextPage(){//下一页            
            this.$emit('setPage', this.curPage+ 1 ) //调用父组件方法
        },
        prevPage(){//上一页
            this.$emit('setPage', this.curPage- 1 ) //调用父组件方法
        },
        gotoNextPage(){//跳转页面
            if(this.gotoPage && /[1-9][0-9]*/.test(this.gotoPage)){             
                var pg = parseInt(this.gotoPage)
                if(pg > 0 && pg <= this.pageSize){
                    this.$emit('setPage', pg ) //调用父组件方法
                }else{
                    this.gotoPage = ""
                }
            }else{
                this.gotoPage = ""
            }
        },      
        firstPage(){
            this.$emit('setPage', 1 ) //调用父组件方法
        },
        lastPage(){
            this.$emit('setPage', this.total ) //调用父组件方法
        },
        rowNumChanged(){
            this.$emit('setRowNum', this.rowNum )
        },
        initPager(){
            this.showFirstPage = this.curPage> 1
            this.showLastPage = this.curPage< this.total
            this.showPrevPage = this.curPage> 1
            this.showNextPage = this.curPage< this.total
            this.gotoPage = ""
        }
    },
    props:[
        "pageSize","curPage","total"
    ],
    watch:{
        'rowNum':'rowNumChanged' //监控rowNum
    }
}
</script>

css

<style>
.pager>span,.pager>a,.pager>select,.pager>div{
    float: left;
    margin-left: 10px;
}

.pager{
    width: 600px;
    margin: 0 auto;
    margin-top: 10px;
    height: 48px;
    line-height: 48px;
    margin-bottom: 40px;
}

.pager input,.pager select{
    height:40px; 
    line-height:40px;
    outline:none; 
    border:1px solid #888; 
    padding:10px; 
    box-sizing:border-box;
}
.pager input{
    width: 50px;
}
.pager .goto{
    margin-left: 20px;
}
.pager a{
    color: black;
    font-weight: bold;
    text-decoration: none;
}
.pager a:hover{
    color: green;
}

</style>

好了,以上就是组件的全部代码



那么父组件该如何调用呢?嘿嘿

分页组件的调用

template

<template>
...
<Pager
v-if="!dataChanged" 
ref="pager"
:pageSize="pageSize" 
:page="curPage" 
:total="total"  
@setPage="gotoPage"
 @setRowNum="changeRowNum" />
...
</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){
                ...
           }
        }
  ...
}

好了,真的完了~

推荐阅读更多精彩内容

  • JavaEE三层架构实现ajax分页查询 开发环境: jdk版本:1.7.0 32位 系统 window10 ID...
    359afe052eac阅读 4,081评论 8 22
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 166,753评论 24 703
  • 前言 分页其实很容易实现,我自己写了一个简单的分页组件,可以实现上下翻页,输入页码跳转到指定页,刷新页面后不会回到...
    大柚子08阅读 2,154评论 0 2
  • 不是你是谁 行者: 地球上的轮回系统,是自然的东西还是更高的生命体创造的? 愚仁: 你这句话在某些情况下能够成立,...
    共享资料阅读 274评论 0 0
  • 很多时候,我们只图一时快活,只图心里舒坦张口就八卦。而说者无意,听者有心。我们从不同角度可以看到众生百态,人生冷暖...
    千绮阅读 216评论 0 0
  • 对现代抒情诗歌的理解是,先对诗和歌两个部分武断的拆分,更准确的说是一首诗歌该怎么去定义,或者说怎么去划分它的归属,...
    孤独的基因阅读 111评论 0 0
  • 单位考来一个小姑娘,九几年的,刚毕业。单位大多是70后80后,大家都觉得刚毕业还是小孩,还很稚嫩,对小姑娘也就没抱...
    五味馅阅读 171评论 2 6