有个小问题就是最多显示3个分页，可以手动改一下配置参数就好。直接代码：
<template>
<div class="pageination_align">
<div class="pageination" v-if="pageinationTotal">
<div @click="pageUp(0)" class="pagination_page" :class="startDisabled?'disabled':''">首页</div>
<div @click="pageUp(1)" class="pagination_page" :class="startDisabled?'disabled':''"><</div>
<div class="pagination_page" :class="item==pageinationCurrentPage?'pagination_page_active':''"
v-for="item in pageinationLength" @click="jump(item)">
{{item}}
</div>
<div @click="pageDown(1)" class="pagination_page" :class="endDisabled?'disabled':''">></div>
<div @click="pageDown(0)" class="pagination_page pagination_page_right" :class="endDisabled?'disabled':''">尾页
</div>
</div>
</div>
</template> <script>
export default {
name: 'pageination',
props: ['total', 'size', 'page', 'changge', 'isUrl'],
data(){
return {
pageinationTotal: this.total,//总条目数
pageinationSize: this.size ? this.size : 10,//每页显示条目个数
pageinationLength: [],
pageinationCurrentPage: this.page ? this.page : 1,//当前页数默认1
pageinationPage: 0,//可分页数
startDisabled: true,//是否可以点击首页上一页
endDisabled: true,//是否可以点击尾页下一页
pageChangge: this.changge,//修改方法
pageIsUrl: this.isUrl ? true : false,//是否开启修改url
}
},
methods: {
jump(item){
this.pageinationCurrentPage = item;
this.pagers();
this.pageChangge(this.pageinationCurrentPage);
},//跳转页码
pagers(){
//可分页数
this.pageinationPage = Math.ceil(this.pageinationTotal / this.pageinationSize); //url修改
if (this.pageIsUrl) {
this.$router.replace({
path: this.$route.path,
query: {
page: this.pageinationCurrentPage,
}
});
}
//是否可以点击上一页首页
this.startDisabled = this.pageinationCurrentPage != 1 ? false : true;
//是否可以点击下一页尾页
this.endDisabled = this.pageinationCurrentPage != this.pageinationPage ? false : true;
if(this.pageinationPage==0) this.endDisabled=true; //重置
this.pageinationLength = [];
//开始页码1
let start = this.pageinationCurrentPage - 3 > 1 ? this.pageinationCurrentPage - 3 : 1;
//当前页码减去开始页码得到差
let interval = this.pageinationCurrentPage - start;
//最多4个页码，总页码减去interval 得到end要显示的数量+
let end = (3 - interval) < this.pageinationPage ? (3 - interval) : this.pageinationPage;
//最末页码减开始页码小于8
if ((end - start) != 8) {
//最末页码加上与不足4页的数量，数量不得大于总页数
end = end + (3 - (end - start)) < this.pageinationPage ? end + (3 - (end - start)) : this.pageinationPage;
//最末页码加上但是还不够9页，进行开始页码追加，开始页码不得小于1
if ((end - start) != 3) {
start = (end - 3) > 1 ? (end - 3) : 1;
}
}
for (let i = start; i <= end; i++) {
this.pageinationLength.push(i);
}
},//计算分页显示的数字
pageUp(state){
if (this.startDisabled)return;
if (this.pageinationCurrentPage - 1 != 0 && state == 1) {
this.jump(this.pageinationCurrentPage - 1);
} else {
this.jump(1);
} },//上一页跟首页 state=1是上一页 state=0是首页
pageDown(state){
if (this.endDisabled)return;
if (this.pageinationCurrentPage + 1 != this.pageinationPage && state == 1) {
this.jump(this.pageinationCurrentPage + 1);
} else {
this.jump(this.pageinationPage);
} },// state=1是下一页 state=0是尾页
pageCurrentChange(){
this.pageChangge(this.pageinationCurrentPage);
this.pagers();
}
},
created(){
this.pageCurrentChange();
},
watch: {
total: function (val, oldVal) {
this.pageinationTotal = val;
this.pagers();
},
page:function (val, oldVal) {
this.pageinationCurrentPage = val;
this.pagers();
}
}
}
</script> <style scoped>
.pageination_align{
text-align: center
}
.pageination {
color: #48576a;
font-size: 12px;
display: inline-block;
user-select: none;
} .pagination_page {
padding: 0 4px;
border: 1px solid #d1dbe5;
border-right: 0;
background: #fff;
font-size: 13px;
min-width: 28px;
height: 28px;
line-height: 28px;
cursor: pointer;
box-sizing: border-box;
text-align: center;
float: left;
} .pagination_page_right {
border-right: 1px solid #d1dbe5;
} .pagination_page:hover {
color: #ED4D53;
} .disabled {
color: #e4e4e4 !important;
background-color: #fff;
cursor: not-allowed;
} .pagination_page_active {
border-color: #ED4D53;
background-color: #ED4D53;
color: #fff !important;;
cursor: default;
}
</style>