Vue 2.0 pagination分页组件

Posted kristy1993

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue 2.0 pagination分页组件相关的知识,希望对你有一定的参考价值。

最近写了一个分页组件,效果如下图:

f-pagination.js文件

Vue.component(\'f-pagination\',{
    template:\'<div class="fPage" v-if="showPagination">\\n\' +
    \'      <ul>\\n\' +
    \'          <li class="sumData">\\n\' +
    \'              <span>共</span>\' +
    \'              <span>{{sumData}}</span>\' +
    \'              <span>条</span>\\n\' +
    \'          </li>\\n\' +
    \'          <li class="prevPage" :class="{disabled:!prevDisabled}">\\n\' +
    \'              <a @click="prevText">{{clickText.prevText}}</a>\\n\' +
    \'          </li>\\n\' +
    \'          <li class="pageNum" v-for="item in pageSum">\\n\' +
    \'              <a @click="itemclick(item)" :class="{active:item.active}">{{item.text}}</a>\\n\' +
    \'          </li>\\n\' +
    \'          <li class="nextPage" :class="{disabled:!nextDisabled}">\\n\' +
    \'              <a @click="nextText">{{clickText.nextText}}</a>\\n\' +
    \'          </li>\\n\' +
    \'          <li class="showPageNum" v-if="showPageNum">\\n\' +
    \'              <select v-model="currentperPageNum" @change="changePerPageNum">\\n\' +
    \'                  <option v-for="item in perPageNum"  :value="item">\' +
    \'                       <span>{{item}}<span>\' +
    \'                       <span>条/页</span>\' +
    \'                  </option>\\n\' +
    \'              </select>\\n\' +
    \'          </li>\\n\' +
    \'          <li class="selectPageNum" v-if="skipPage">\\n\' +
    \'              <span>跳至</span>\\n\' +
    \'              <input type="text" v-model="skipPageNum" @keyup.13="skipPageclick">\\n\' +
    \'              <span>页</span>\\n\' +
    \'          </li>\\n\' +
    \'      </ul>\\n\' +
    \'    </div>\',
    props:{
        pageNum:{  //总页数
            type:Number,
            default:0
        },
        sumData:{  //总数据
            type:Number,
            default:0
        },
        clickText:{
            type:Object,
            default:function(){
                return {
                    prevText:"上一页",
                    nextText:"下一页"
                }
            }
        },
        perPageNum:{  //每页显示多少条
            type:Array,
            default:function(){
                return [100,200,300,400]
            }
        },
        options:{
            type:Object,
            default:function(){
                return {
                    pageRows:\'1\',
                    visibleCount:5,
                    limitNum:true,  //是否显示每页多少条
                    skipPage:true
                }
            }
        }
    },
    data:function(){
        return{
            pageSum:[],//页数数据
            currentPage: 1,
            prevDisabled: true, //上一页
            nextDisabled: false, //下一页
            skipPageNum:1,
            currentperPageNum:\'\' //每页显示多少条数据
        }
    },
    computed:{
        showPagination:function(){  //总页数大于1时才显示分页
            if(this.pageNum == 0 || this.pageNum == 1){
                return false;
            }else{
                return true;
            }
        },
        pageCount:function(){ //显示的页数
            if(this.pageNum >= this.options.visibleCount){
                return this.options.visibleCount;
            }else{
                return this.pageNum;
            }
        },
        showPageNum:function(){
            return this.options.limitNum;
        },
        skipPage:function(){
            return this.options.skipPage;
        }
    },
    methods:{
        initData:function(){  //页面初始化
            if(!this.pageCount) return false;
            this.pageSum = [];
            this.currentPage = 1;
            for(var i = 0; i < this.pageCount; i++){
                this.pageSum.push({
                    text: i+1,
                    active: false
                });
            }
            this.pageSum[0].active = true;
            this.prevDisabled = false;
            this.nextDisabled = true;
            this.skipPageNum = this. pageNum;
        },
        itemclick:function(item){ //点击页
            if(this.currentPage != item.text){
                this.currentPage = item.text;
                this.calcItem();
            }
        },
        prevText:function(){ //上一页
            if(this.prevDisabled){
                this.currentPage-=1;
                this.calcItem();
            }
        },
        nextText:function(){ //下一页
            if(this.nextDisabled){
                this.currentPage+=1;
                this.calcItem();
            }
        },
        calcItem:function(){
            if(this.pageCount < this.options.visibleCount){
                this.resetStyle();
                this.pageSum[this.currentPage-1].active = true
                //计算上一页,下一页的显示
                if(this.currentPage == 1){
                    this.prevDisabled = false;
                    this.nextDisabled = true;
                }else if(this.currentPage == this.pageCount){
                    this.prevDisabled = true;
                    this.nextDisabled = false;
                }else{
                    this.prevDisabled = true;
                    this.nextDisabled = true;
                }
            } else {
                var midNum = Math.ceil((this.pageCount)/2); //中间数
                if(this.pageCount % 2 == 0){  //如果是偶数中间数加1
                    midNum += 1;
                }
                var midPage = this.pageNum - (this.pageCount - midNum);//最后一页在中间的页码
                if(this.currentPage <= midPage){  //当前页在最后一页前
                        this.resetStyle();
                        if(this.currentPage <= midNum){ //当前点击的页数小于当前的中间页
                            this.pageSum[this.currentPage-1].active = true;
                            var starNum = 0;
                            for(var i = 0; i < this.pageCount; i++){
                                this.pageSum[i].text = starNum + i + 1;
                            }
                        } else {  //当前点击的页数大于当前的中间页
                            var starNum = this.currentPage - midNum;
                            for(var i = 0;i < this.pageCount; i++){
                                this.pageSum[i].text = starNum + i + 1;
                            }
                            this.pageSum[midNum-1].active = true;
                        }
                        //计算上一页的显示,下一页始终显示
                        if(this.currentPage == 1){
                            this.prevDisabled = false;
                        }else {
                            this.prevDisabled = true;
                        }
                        this.nextDisabled = true;
                } else {  //如果当前到最后页
                    var starNum = this.pageNum - this.pageCount +1;
                    for(var i = 0;i < this.pageCount; i++){
                        this.pageSum[i].text = starNum + i;
                    }
                    this.resetStyle();
                    var index = this.pageNum - this.currentPage;
                    this.pageSum[this.pageCount - index - 1].active = true;
                    //计算下一页的显示,上一页始终显示
                    if(this.currentPage == this.pageNum){
                        this.nextDisabled = false;
                    }else {
                        this.nextDisabled = true;
                    }
                    this.prevDisabled = true;
                }
            }
        },
        resetStyle:function(){
            for(var i = 0; i < this.pageCount; i++){
                this.pageSum[i].active = false;
            }
        },
        skipPageclick:function(){
            if(this.skipPageNum>=1 && this.skipPageNum<= this.pageNum){
                this.currentPage = parseInt(this.skipPageNum);
            }else if(this.skipPageNum>this.pageNum){
                this.currentPage = parseInt(this.pageNum);
            }else{
                this.currentPage = 1;
            }
            this.calcItem();
            this.skipPageNum =\'\';
        },
        changePerPageNum:function(){
            console.log(this.currentperPageNum);
        }
    },
    created:function(){
        this.initData();
    }

});

f-pagination.css文件

ul,li,span,input,select{
    margin:0;
    padding:0;
}
ul{
    list-style: none;
}
li{
    float:left;
    margin-right:10px;
    font-size:14px;
}
a{
    text-decoration: none;
    color:black;
}
.fPage{
    margin:100px 200px;
}
.fPage ul>li>a{
    border:1px solid #C3C9D3;
    text-align:center;
    color: #656565;
    padding: 6px 12px;
}
.pageNum .active{
    background-color: #1B6FEC;
    color:white;
}
.fPage .showPageNum>select{
    padding: 6px 10px;
    margin-top:-6px;
}
.fPage .selectPageNum{
    margin-top:-5px;
}
.fPage .selectPageNum>input{
    width:20px;
    padding: 5px 8px;
}
.disabled{
    outline:0 none;
    cursor:default;
    opacity: 0.4;
    /*filer:alpha(opacity=40);*/
    pointer-events: none;
}

index.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="f-pagination.css">
    <script src="vue.js"></script>
    <script src="f-pagination.js"></script>
</head>
<body>
    <div id="app">
        <f-pagination
            :page-num="pageNum"
            :options="tabDataPagination.userOptions"
            :sum-data = "tabDataPagination.rowCount"
        ></f-pagination>
    </div>

</body>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            pageNum:12, //总页数
            tabDataPagination: { 
                count: 0,
                rowCount: 300,
                userOptions: {
                    visibleCount: 8,
                    limitNum:true,
                    skipPage:true
                }
            }
        }
    })
</script>
</html>

以上是关于Vue 2.0 pagination分页组件的主要内容,如果未能解决你的问题,请参考以下文章

Vue 基于ElementUI 封装table表格组件 + pagination分页组件

采用Vue2.0开发的分页js组件

vue-cli3 element 分页组件el-pagination的基本使用

超简单的vue2.0分页组件

Vue项目中使用elementUI之Pagination分页组件的二次封装复用

vue框架,使用pagination组件进行分页时 分页不在第一页的时候保存了 筛选记录,然后f5刷新又到第一页了,到了onCurrentChange改变分页的函数改变了