vue分页

先看看效果图

首先你需要有一个前端的html分页

<!-- 分页 -->
                            <ul class="pagination" style="display: flex;justify-content: center;" id="paginationUl">
                                <li><a href="#" @click="firstPage"><<</a></li>
                                <li><a href="#" class="demo-pli-arrow-left" @click="prePage"></a></li>
                                <li v-for="n in pageLoopEnd"><a href="#" @click="clickPage(n+startPage-1)">{{n+startPage-1}}</a>
                                </li>
                                <li><a href="#" class="demo-pli-arrow-right" @click="nextPage"></a></li>
                                <li><a href="#" class="" @click="latestPage">>></a></li>
                                <li><a href="#" class="">共2页</a></li>
                                <li style="line-height: 33px;font-size: 12px;height: 33px;padding: 0 3px;background-color: #414a59;border-radius: 3px;">跳至<input type="text" style="width: 25px;height: 20px;border-radius: 3px;background-color: #36383c;color: #fefefe;border: none;text-align: center;margin: 0 3px;" value="">页</li>
                            </ul>

在data定义分页数据

//分页数据定义--start
            currentPage: 1,
            totalPage: 1,
            startPage: 1,
            endPage: 1,
            pageSize: 10,
            //loop页数
            pageLoopEnd:5,
            //分页相关数据定义--end

然后就可以获取数据了

methods:{
// 获取事件列表数据
            getEventListData: function () {
                var _this = this;
                axios.get('接口地址', {
                    params: {//参数
                        "size": _this.pageSize,
                        "current": _this.currentPage
                    }
                }).then(function (rd) {
                	rd = rd.data;
                    //赋值分页数据
                    _this.currentPage = rd.data.current;
                    _this.totalPage = rd.data.pages;
                    if(_this.totalPage < 6){
                        _this.pageLoopEnd = _this.totalPage;
                    }else{
                        _this.pageLoopEnd = 5;
                    }
                    //初始化分页
                    _this.initPaging();
                }).catch(function (error) {
                    console.log(error);
                })
            },
            //初始化分页
            initPaging: function () {
                var _this = this;
                if (_this.currentPage <= 3) {
                    _this.startPage = 1;
                } else {
                    _this.startPage = _this.currentPage - 2;
                    if (_this.startPage > _this.totalPage - 4) {
                        _this.startPage = _this.totalPage - 4;
                    }
                }
            },
             //点击具体的分页
            clickPage: function (currentPage) {
                var _this = this;
                _this.currentPage = currentPage;
                _this.getEventListData();
            },
            //跳到第一页
            firstPage: function () {
                var _this = this;
                _this.currentPage = 1;
                _this.getEventListData();
            },
            //前一页
            prePage: function () {
                var _this = this;
                _this.currentPage = _this.currentPage - 1;
                if (_this.currentPage < 1) {
                    _this.currentPage = 1;
                    alert("已经是第一页了.")
                }
                _this.getEventListData();
            },
            //后一页
            nextPage: function () {
                var _this = this;
                _this.currentPage = _this.currentPage + 1;
                if (_this.currentPage > _this.totalPage) {
                    _this.currentPage = _this.totalPage;
                    alert("已经是最后一页了.")
                }
                _this.getEventListData();
            },
            //跳到最后一页
            latestPage: function () {
              var _this = this;
                _this.currentPage = _this.totalPage;
                _this.getEventListData();
            },
},
mounted:function (){//初始化
	this.initPage();
}

一套打完收工