vue分页码展示

        <div class='fixed-footer-btns show' id='fixed-footer-btns' style='line-height: 30px;'>
            <div class='holder-body' style="display: flex; justify-content: center; flex-wrap: wrap; background-color: rgba(220,220,220,.8); padding: 4px 10px;">
                <div style='padding-right: 15px;'>
                    共{{pages.count}}条，第{{pages.page}}/{{pages.pageCount}}页
                </div>
                <div>
                    <ul class='yiiPager'>
                        <li class='first' v-if='pages.pageCount>1'><a href='javascript:;' class='page-jumper' @click='gotoPage(1)'>首页</a></li>
                        <li class='previous' v-if='pages.page>1'><a href='javascript:;' class='page-jumper' @click='gotoPage(pages.page - 1)'>上一页</a></li>
                        <li class='page' :class='item.class' v-for='item in pageList'><a href='javascript:;' class='page-jumper' @click='gotoPage(item.page)'>{{item.page}}</a></li>
                        <li class='next' v-if='pages.page < pages.pageCount'><a href='javascript:;' class='page-jumper' @click='gotoPage(pages.page + 1)'>下一页</a></li>
                        <li class='last' v-if='pages.pageCount>1'><a href='javascript:;' class='page-jumper' @click='gotoPage(pages.pageCount)'>末页</a></li>
                    </ul>
                </div>
                <div class='input-group input-group-sm pageGoto margin-left-sm'>
                    <input ref='pagenum' @change='gotoPage()' type='text' class='form-control input-sm text-center' style="width: 60px;">
                    <div class='input-group-btn '>
                        <div class='btn btn-sm btn-default' @click='gotoPage()'>跳转</div>
                    </div>
                </div><!-- /input-group -->
                <div class='input-group pageGoto margin-left-sm'>
                    <select ref='pageSize' v-model="pages.pageSize" @change='gotoPage(1)' class='form-control input-sm text-center' style="width: 100px;">
                        <option value="10">10/页</option>
                        <option value="30">30/页</option>
                        <option value="50">50/页</option>
                        <option value="100">100/页</option>
                        <option value="200">200/页</option>
                        <option value="300">300/页</option>
                        <option value="500">500/页</option>
                        <option value="1000">1000/页</option>
                    </select>
                </div><!-- /input-group -->
            </div>
        </div>

new Vue({

...
            computed:{

                pageList(){
                    const {pages} = this
                    var res = []
                    var pageViewCount = 5; //显示当前分页前后的页码数
                    for (var i = pages.page - pageViewCount; i <= pages.page + pageViewCount; i++) {
                        if (i < 1 || i > pages.pageCount) {
                            continue;
                        }
                        res.push({
                            class: i == pages.page ? 'selected' : '',
                            page: i,
                        })
                    }
                    return res
                }
}
...

})

版权属于：Joyber

本文链接：https://blog.qqvbc.com/default/1050.html

转载时须注明出处及本声明