vue 手写分页

 

 

 data:{

                crossing_status:CROSSING_STATUS,

                crossing_list:[],

                time:null,

                log: {

                    page: 1,

                    pages: 1,

                    total: 0,

                    count: 20,

                    displayPage: 5,

                    list: []

                   },

                selectedDate:"",

            },

            computed:{

              crossingList:function(){

                  return this.crossing_list.slice()

              },

              logPageInfo: function () {

                var ar = [];

                if (this.log.pages < this.log.displayPage || this.log.pages == this.log.displayPage + 1) { //数字全部显示

                    for (var i = 1; i <= this.log.pages; i++) {

                        ar.push(i)

                    }

                } else if (this.log.page < this.log.displayPage - 1) {//后面显示省略号

                    for (var i = 1; i < this.log.displayPage; i++) {

                        ar.push(i)

                    }

                    ar.push(this.log.pages);

                } else if (this.log.page <= this.log.pages && this.log.page > this.log.pages - this.log.displayPage + 2) {  //前面显示省略号

                    ar.push(1);

                    for (var i = this.log.pages - this.log.displayPage + 2; i <= this.log.pages; i++) {

                        ar.push(i);

                    }

                } else {  //前后显示省略号

                    ar.push(1);

                    var d, e, f = (this.log.displayPage - 3) / 2;

                    (this.log.displayPage - 3) % 2 == 0 ? d = e = f : (d = Math.floor(f), e = Math.ceil(f));

                    for (var i = this.log.page - d; i <= this.log.page + e; i++) {

                        ar.push(i);

                    }

                    ar.push(this.log.pages);

                }

                return ar;

            },

            },

 

<!-- 分页 -->

        <div class="text-right zh-mt-20 clearfix">

            <div class="zh-page zh-page-black fr">

                <div class="zh-page-content">

                    <ul>

                        <li :class="{'zh-disabled':log.page == 1,'notclick':log.page == 1}">

                            <a @click="logPageChange(1)">首页</a></li>

                        <li :class="{'zh-disabled':log.page == 1,'notclick':log.page == 1}">

                            <a @click="logPageChange(log.page-1)">上一页</a></li>

                        <li :class="{'zh-cur': log.page == 1}"><a @click="logPageChange(1)">1</a></li>

                        <template v-for="p in logPageInfo">

                            <li v-if="p > 0 && log.pages > 2"

                                :class="{ 'zh-cur': log.page == p, 'hide':(p==1 || p==log.pages)}">

                                <a @click="logPageChange(p)">{{p}}</a>

                            </li>

                        </template>

                        <li :class="{'hide':(log.pages < log.displayPage || log.pages -log.page<(log.displayPage-2))}">

                            <a>...</a>

                        </li>

                        <li :class="{ 'zh-cur': log.page == log.pages,'hide':log.pages == 1}">

                            <a @click="logPageChange(log.pages)">{{log.pages}}</a>

                        </li>

                        <li :class="{'zh-disabled':log.page == log.pages,'notclick':log.page == log.pages}">

                            <a @click="logPageChange(parseInt(log.page)+1)">下一页</a></li>

                        <li :class="{ 'zh-cur':  log.page == log.pages,'zh-disabled':log.page == log.pages,'notclick':log.page == log.pages}">

                            <a @click="logPageChange(log.pages)">尾页</a>

                        </li>

                    </ul>

                    <span class="zh-total">共{{ log.pages }}页</span>

                </div>

            </div>

        </div>