先看看效果图
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/ef793122cc57d58804ebc8f522b79a51.png)
首先你需要有一个前端的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定义分页数据
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/9f0495c2803d3ac547ae6b3291ca444b.png)
currentPage: 1,
totalPage: 1,
startPage: 1,
endPage: 1,
pageSize: 10,
pageLoopEnd:5,
然后就可以获取数据了
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();
}
一套打完收工