1.
<div class="nav" style="text-align:center;margin: auto;">
<div class="pravPage" @click="prav">上一页</div>
<div class="pages" v-for="(item,index) in conpages" :key="index"
@click="page(item)" :class="item==cur?'active':''" >{{item}}</div>
<div class="nextPage" @click="next">下一页</div>
</div>
2.data-return
conpages:'',//总页数
cur:1, //当前页
pageSize:5, //每页要展示数据条数
showPage:[],
tableList:[], //所有页面数据
3.created(也可写在请求所有页面数据后)
//求总页数,Math.ceil()方法 可以对数进行上舍入
this.conpages = Math.ceil(this.tableList.length/this.pageSize);
this.page(this.cur)
4.methods
page(item){
this.cur=item; //当前页
var list = (this.cur-1)*this.pageSize; //每去一组数据的第一个索引
this.showPage = this.tableList.slice(list,list+this.pageSize); //从总数据中取出每页的数据
},
//上一页
prav(){
if(this.cur!=1){
this.cur--
this.page(this.cur)
}
},
//下一页
next(){
if(this.cur<this.conpages){
this.cur++
this.page(this.cur)
}
},
5.css
.nav{width: 250px;height: 30px;display: flex;align-items: center;}
div[class$=Page]{width: 80px; height: 25px;text-align: center;color: black;
line-height:25px;background-color: #8f8f8f;margin: 0 5px;}
div[class=pages]{width: 25px;height: 25px;border: 1px solid #c3c3c3;border-radius: 5px;
margin: 0 5px;background-color: rgb(236, 235, 235);text-align: center;line-height: 25px;}
.active{width: 25px;height: 25px;border: 1px solid #8f8f8f;border-radius: 5px;
margin: 0 5px;background-color: #8f8f8f;text-align: center;
line-height: 25px;color: #fff;}
.nav div:hover{cursor: pointer;}
.box{width: 550px;height: 200px;border: 1px solid #eee;background-color: #f5f5f5;}