Mimic elementUI and use it at the bottom
<!--分页器代码-->
<template>
<div class="fr page">
<div class="pagination">
<button
:disabled="myCurrentPage <= 1"
:class="{cursor: myCurrentPage <= 1 }"
@click="setCurrentPage(myCurrentPage - 1)"
>
上一页
</button>
<button :class="{ active: myCurrentPage === 1 }" @click="setCurrentPage(1)">
1
</button>
<button v-show="startEnd.start > 2" @click="setCurrentPage(startEnd.start)">...</button>
<button
ref="btn"
v-for="item in mapBtnsCount"
:key="item"
@click="setCurrentPage(startEnd.start + item - 1)"
:class="{ active: myCurrentPage === startEnd.start + item - 1 }"
>
{{ startEnd.start + item - 1 }}
</button>
<button
v-show="startEnd.end < totalPages - 1"
@click="setCurrentPage(startEnd.end)"
>...
</button>
<button
:class="{ active: myCurrentPage === totalPages }"
v-show="totalPages > 1"
@click="setCurrentPage(totalPages)"
>
{{ totalPages }}
</button>
<button
:disabled="myCurrentPage >= totalPages"
@click="setCurrentPage(myCurrentPage + 1) "
:class="{cursor: myCurrentPage >= totalPages}"
>
下一页
</button>
<span class="goPage">
前往
<div>
<input type="number" v-model.lazy.number="goPageInput">
</div>
</span>
<!-- 选择一页显示几条数据 -->
<select v-model="countData" class="select">
<option v-for="list of pageSizes" :key="list" :value="list">{{ list }}条/页</option>
</select>
<span class="total">共{{ total }}条</span>
</div>
</div>
</template>
<script
export default {
name: "Pagination",
// 声明数据类型并接收
props: {
// 当前页码
currentPage: {
type: Number,
default: 1,
},
// 要显示页码的数字 一般 7 就行了 奇数
pagerCount: {
type: Number,
validator(val) {
// 验证，验证通过才会有用
// 大于等于 5 且小于等于 21 的奇数
// 返回true验证成功，
// 返回false验证失败
return val >= 5 && val <= 21 && val % 2 === 1;
},
default: 7
},
// 每页显示多少条数据
pageSize: {
type: Number,
default: 5
},
// 更改每页显示几条数据
pageSizes: {
type: Array,
default() {
return [5, 10, 15, 20]
}
},
// 总页数
total: {
type: Number,
// required: true
default: 0
}
},
data() {
return {
// 为了方便修改myCurrentPage，定义data数据 响应式数据
// 原因：props数据只读不能修改
myCurrentPage: this.currentPage
// goPage: 1,
}
},
// 侦听器 监听某一个属性的值
watch: {
// 用于调用父组件传递的事件 修改总页数
myCurrentPage(currentPage) {
// this.$listeners['current-change'](currentPage)
// 执行自定义事件
this.$emit("currentChange", currentPage)
},
// 更新页码
currentPage(currentPage) {
this.myCurrentPage = currentPage
},
},
computed: {
// 修改一页显示多少条数据
countData: {
get() {
// 父组件传递的页码
return this.pageSize
},
set(val) {
// 更新页码
this.$emit('currentPageSize', val)
}
},
// 总页数
totalPages() {
// 向上取整 即小数部分直接舍去，并向正数部分进1 用总数据条数 / 每页数量
return Math.ceil(this.total / this.pageSize)
},
// 计算中间按钮的开始和结束的按钮值
startEnd() {
const {myCurrentPage, pagerCount, totalPages} = this
// 中间start-end总计的按钮数量（不包含开头和结尾）
const count = pagerCount - 2;
// 中间的一半 向下取整 即小数部分直接舍去
const halfCount = Math.floor(count / 2)
let start, end;
/*
start 开头
1. start = myCurrentPage - halfCount
1...3 4 [5] 6 7...10
3 = 5 - 2
问题：
1 [2] 3 4 5 6 ...10
0 = 2 - 2
解决：修正start的值，不能小于1
问题：
1 ... 5 6 7 8 [9] 10
7 = 9 - 2
end 结尾
2. end = start + count - 1
1...3 4 [5] 6 7...10
7 = 3 + 5 - 1
1 [2] 3 4 5 6 ...10
1...3 4 [5] 6 7...10
1 ... 5 6 7 8 [9] 10
1 [2] 3
[1] --> 如果start大于总页数，不显示
*/
if (myCurrentPage >= totalPages - halfCount) {
//1 ... 5 6 7 8 [9] 10
start = totalPages - count
} else {
// 正常情况
start = myCurrentPage - halfCount
}
if (start <= 1) {
start = 2
}
// 正常情况
end = start + count - 1;
if (end >= totalPages) {
// 1 [2] 3
end = totalPages - 1
}
// 返回计算结果
return {
start,
end
}
},
// 跳转页码输入框的值
goPageInput: {
get() {
return this.myCurrentPage
},
set(value) {
// 判断输入的值,边界值
if (value < 1) {
value = 1
} else if (value > this.totalPages) {
value = this.totalPages
}
this.myCurrentPage = parseInt(value)
// 更新页码
this.setCurrentPage(value)
}
},
// 总共要遍历的按钮数量
mapBtnsCount() {
// 解构赋值
const {start, end} = this.startEnd
// 用最终的页码 - 最小的页码 + 1
const count = end - start + 1
return count >= 1 ? count : 0
}
},
methods: {
// 更新页码
setCurrentPage(currentPage) {
this.goPage = currentPage
this.myCurrentPage = currentPage
// 返回顶部参照京东
window.scrollTo(0, 0)
}
}
}
</script>
<style lang="less" scoped>
// 超过设定最大边界 结束与开始把鼠标样式更改
.cursor {
cursor: not-allowed !important;
}
//选择一页显示多少条数据的样式
.select {
background-color: #FFF;
border: 1px solid #DCDFE6;
-webkit-box-sizing: border-box;
box-sizing: border-box;
color: #606266;
display: inline-block;
height: 28px;
line-height: 28px;
outline: 0;
padding: 0 5px;
-webkit-transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
border-radius: 3px;
font-size: 13px;
}
.total {
display: inline-block;
font-size: 13px;
min-width: 35.5px;
height: 28px;
line-height: 28px;
vertical-align: top;
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin-left: 10px;
font-weight: 400;
color: #606266;
}
.page {
width: 100%;
height: 66px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
}
.pagination {
display: flex;
white-space: nowrap;
font-weight: 700;
align-items: center;
button {
margin: 0 5px;
padding: 0 4px;
font-size: 13px;
min-width: 30px;
height: 28px;
line-height: 28px;
cursor: pointer;
box-sizing: border-box;
text-align: center;
border: none;
outline: none;
display: block;
background-color: #f4f4f5;
color: #606266;
border-radius: 2px;
}
}
// 去除number类型表单的上下箭头
input::-webkit-inner-spin-button {
-moz-appearance: textfield;
-webkit-appearance: none !important;
}
.goPage {
display: inline-block;
font-size: 13px;
min-width: 35.5px;
height: 28px;
line-height: 28px;
margin-right: 10px;
vertical-align: top;
box-sizing: border-box;
div {
position: relative;
font-size: 14px;
display: inline-block;
width: 50px;
line-height: 18px;
padding: 0 2px;
height: 28px;
text-align: center;
margin: 0 2px;
box-sizing: border-box;
border-radius: 3px;
input {
text-align: center;
line-height: normal;
-webkit-appearance: none;
background-color: #fff;
background-image: none;
border-radius: 4px;
border: 1px solid #dcdfe6;
box-sizing: border-box;
color: #606266;
display: inline-block;
font-size: inherit;
height: 28px;
line-height: 28px;
outline: none;
transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
width: 100%;
}
}
}
button.active {
background-color: #409eff;
color: #fff;
}
</style>
Copy the codeuse
<div> /* <Pagination ref=" Pagination CurrentChange ="currentChange" // update page number :currentPage="options.pageNo" // currentPage number :pageSize="options.pageSize" // number of pages per page : pagerCount = "7" / / the default 7 | | just an odd number of not less than 5 general 7: pageSizes = ",10,15,20 [5] / / to modify each page shows a few data: total = "total" / > total * / / / data <Pagination ref="pagination" @currentPageSize="currentPageSize" @currentChange="currentChange" :currentPage="options.pageNo" :pageSize="options.pageSize" :pagerCount="7" :pageSizes="[5,10,15,20]" :total="total" /> </div> <script > export default {data() {return {options: {pageNo: 1, // pageSize: 5 // number per page}, total:0 // Total number}}, methods:{// Request for data async getOrderLists() {let {pageNo, PageSize} = this.options let {code, data, message} = await this.$api.center. getOrderLists(pageNo, pageSize) if (code ! = = 200) {this. $message. The error message (| | 'failed to get the order) return} / / assignment again this. Total quantity of total = data. The total / / submit the goods orders this.orderList = data.records }, CurrentChange (pageNo) {this.options.pageNo = pageNo this.getorderLists ()}, CurrentPageSize (pageSize) {this.options.pageSize = pageSize; Let pageNo = math.ceil (this.total/this.options.pagesize) // If you change the number of pages displayed on each page and then change the default page number again, the data request will be automatically called // If (pageNo >= this.options.pageNo) {pageNo = this.options.pageNo} // Determine new (page) end value === old end value (page) If (pageNo === this.options.pageno) {// Call to get data request this.getorderLists ()} // update the page number this.options.pageno = pageNo // Update pager component input box value this. $refs. Pagination. GoPageInput = pageNo / / the page assignment is empty pageNo = null},}} < / script >Copy the code