当前位置：首页 > news >正文

自定义分页控件，只显示当前页码的前后N页

news 2025/9/29 8:02:41

<template><divclass="pager-cn"v-if="total>0"><spanclass="page-btn pre-btn":class="{ 'disabled-btn': pageList.currentPage == 1 }"@click="onPrePage"><i aria-label="图标: left"><svgviewBox="64 64 896 896"data-icon="left"width="1em"height="1em"fill="currentColor"aria-hidden="true"focusable="false"class=""><path d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 0 0 0 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"></path></svg></i></span><ul class="page-list"><liclass="page-btn":class="{ 'selected-page': page == pageList.currentPage }"v-for="(page, index) in pageList.list":key="index"@click="onChangePage(page)"><span>{{ page }}</span></li></ul><spanclass="page-btn next-btn":class="{ 'disabled-btn': pageList.currentPage == pageList.totalPage }"@click="onNextPage"><i aria-label="图标: right"><svgviewBox="64 64 896 896"data-icon="right"width="1em"height="1em"fill="currentColor"aria-hidden="true"focusable="false"class=""><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"></path></svg></i></span></div>
</template>
<script>
export default {name: "",props: {// 当前页码currentPage: {type: Number,default: 1,},// 总条数total: {type: Number,default: 0,},// 分页器每行最多显示多个页签pageRowNumber: {type: Number,default: 10,},},components: {},data() {return {pageList: {list: [],currentPage: 1, // 当前页码pageSize: 10, // 每页显示条数totalPage: 0, // 总页数total: 0, // 总条数pageRowNumber: 10, // 分页器显示的页码数量},};},watch: {pageRowNumber: {handler(value) {this.pageList.pageRowNumber = value;},immediate: true},total: {handler(value) {this.pageList.total = value;// 计算总页数this.pageList.totalPage = Math.ceil(value / this.pageList.pageSize);console.log("this.pageList.totalPage", this.pageList.totalPage);this.handleCurrent(1);},immediate: true},currentPage: {handler(value) {this.handleCurrent(value);},immediate: true},},computed: {},created() {},methods: {onPrePage() {if (this.pageList.currentPage === 1) {return;}this.$emit("pageChange", this.pageList.currentPage - 1);},onNextPage() {if (this.pageList.currentPage === this.pageList.totalPage) {return;}console.log(this.pageList.currentPage);this.$emit("pageChange", this.pageList.currentPage + 1);},onChangePage(page) {if (page === this.pageList.currentPage) {return;}this.$emit("pageChange", page);},handleCurrent(value) {this.pageList.currentPage = value;this.pageList.list = [];// 总页数小于等于每行显示的页码数量时，直接显示所有页码if (this.pageList.totalPage <= this.pageList.pageRowNumber) {console.log("直接显示所有页码", this.pageList.totalPage, this.total);for (let i = 1; i <= this.pageList.totalPage; i++) {this.pageList.list.push(i);}} else {// 当前页码小于等于每行显示的页码数量的一半时，显示前{ pageRowNumber }页if (value <= Math.floor(this.pageList.pageRowNumber / 2)) {for (let i = 1; i <= this.pageList.pageRowNumber; i++) {this.pageList.list.push(i);}}// 当前页码大于总页数减去每行显示的页码数量的一半时，显示后{ pageRowNumber }页else if (value >this.pageList.totalPage - Math.floor(this.pageList.pageRowNumber / 2)) {for (let i = this.pageList.totalPage;i > this.pageList.totalPage - this.pageList.pageRowNumber;i--) {this.pageList.list.unshift(i);}}// 当前页码在中间时，显示当前页的前后{ pageRowNumber }页else {// 每行显示的数量为奇数时if (this.pageList.pageRowNumber % 2 === 0) {for (let i =this.pageList.currentPage -Math.floor(this.pageList.pageRowNumber / 2);i <this.pageList.currentPage +Math.floor(this.pageList.pageRowNumber / 2);i++) {this.pageList.list.push(i);}}// 每行显示的数量为偶数时else {for (let i =this.pageList.currentPage -Math.floor(this.pageList.pageRowNumber / 2);i <=this.pageList.currentPage +Math.floor(this.pageList.pageRowNumber / 2);i++) {this.pageList.list.push(i);}}}}},},
};
</script>
<style lang="less" scoped>
.pager-cn {margin: 10px auto 0;text-align: center;.page-btn {font-size: 12px;display: inline-block;text-align: center;user-select: none;cursor: pointer;padding: 0 6px;min-width: 32px;height: 32px;font-family: Arial;line-height: 30px;text-align: center;vertical-align: middle;list-style: none;background-color: #fff;border: 1px solid #e8eaf2;border-radius: 0px;outline: 0;-webkit-user-select: none;-moz-user-select: none;user-select: none;&.selected-page,&:hover {font-weight: 500;background: #fff;border-color: #6176ff;color: #8a9dff;}}.pre-btn,.next-btn {min-width: 28px;}.disabled-btn,.disabled-btn:hover {color: #e8eaf2;border-color: #e8eaf2;}.page-list {margin: 0 6px;display: inline-block;.page-btn {margin-right: 6px;}.page-btn:last-child {margin-right: 0;}}
}
</style>

效果如下