z 分页组件
<template>
<div class="pagination">
<button :disabled="pageNo == 1" @click="$emit('getPageNo', pageNo - 1)">
上一页
</button>
<!-- 第一部分 -->
<button
:class="{ active: pageNo == 1 }"
v-if="startNumAndEndNum.start > 1"
@click="$emit('getPageNo', 1)"
>
1
</button>
<button v-if="startNumAndEndNum.start > 2">···</button>
<!-- 中间部分 -->
<template v-for="(page, index) in startNumAndEndNum.end">
<button
v-if="page >= startNumAndEndNum.start"
:key="index"
@click="$emit('getPageNo', page)"
:class="{ active: pageNo == page }"
>
{{ page }}
</button>
</template>
<!-- 第三部分 -->
<button v-if="startNumAndEndNum.end < totalPage - 1">···</button>
<button
v-if="startNumAndEndNum.end < totalPage"
@click="$emit('getPageNo', totalPage)"
:class="{ active: pageNo == totalPage }"
>
{{ totalPage }}
</button>
<button
:disabled="pageNo == totalPage"
@click="$emit('getPageNo', pageNo + 1)"
>
下一页
</button>
<button style="margin-left: 30px">共 {{ total }} 条</button>
</div>
</template>
<script>
export default {
name: "Pagination",
props: ["pageNo", "pageSize", "total", "continues"],
computed: {
// 总共多少页
totalPage() {
// 向上取整
return Math.ceil(this.total / this.pageSize);
},
// 计算出连续的页码的起始数字与结束数字
startNumAndEndNum() {
// 定义两个变量 起始数字 与 结束数字
let start = 0,
end = 0;
// 连续页面数字5 【至少是5页】
// 不正常页数，总页数少于连续页数
if (this.continues > this.totalPage) {
start = 1;
end = this.totalPage;
} else {
// 起始数字
start = this.pageNo - parseInt(this.continues / 2);
// 结束数字
end = this.pageNo + parseInt(this.continues / 2);
console.log(start, end);
// 不正常页数， start 出现0 或者 负数
if (start < 1) {
start = 1;
end = this.continues;
}
// 不正常页数，end 大于总页码数
if (end > this.totalPage) {
end = this.totalPage;
start = this.totalPage - this.continues + 1;
}
}
return {
start,
end,
};
},
},
};
</script>
<style lang="less" scoped>
.pagination {
text-align: center;
button {
margin: 0 5px;
background-color: #f4f4f5;
color: #606266;
outline: none;
border-radius: 2px;
padding: 0 4px;
vertical-align: top;
display: inline-block;
font-size: 13px;
min-width: 35.5px;
height: 28px;
line-height: 28px;
cursor: pointer;
box-sizing: border-box;
text-align: center;
border: 0;
&[disabled] {
color: #c0c4cc;
cursor: not-allowed;
}
&.active {
cursor: not-allowed;
background-color: #409eff;
color: #fff;
}
}
}
</style>
<!-- 分页组件 使用 -->
<Pagination
:pageNo="1"
:pageSize="10"
:total="99"
:continues="5"
@getPageNo="getPageNo"
/>
getPageNo(pageNo) {
console.log(pageNo);
this.pageNo = pageNo;
this.getData();
},
免责申明：
1. 本站所有教程、文章或资源分享目的仅供大家学习和交流！
2. 如有无法查看或链接失效，麻烦请报告联系管理员处理！
3. 本站无法保证资源或其时效性，恕不接受任何提问。
4. 在本站下载的源码严禁杜绝任何形式的正式商业用途，请去程序官方购买。 所有资料均来自于网络，版权归原创者所有！本站不提供任何保证，并不承担任何法律责任，如果对您的版权或者利益造成损害，请提供相应的资质证明，我们将于3个工作日内予以删除。
