/*分页组件*/
<template>
<div class="pagination">
<ul>
<li
v-if="showPrevMore" @click="handleLessPage(1)">...</li>
<li v-for="num in pageList" :class="{ active: num === currentPage }" @click="handleChangePage(num)">{{ num }}</li>
<li
v-if="showNextMore" @click="handleMorePage(1)">...</li>
</ul>
<div
v-if="showPageSizeSelector" class="page-size-selector">
<span>每页显示</span>
<select v-model="pageSize" @change="handleChangePageSize">
<option v-for="size in pageSizeOpts" :key="size" :value="size">{{ size }} 条</option>
</select>
</div>
</div>
</template>
<script>
export default {
name: 'Pagination',
props: {
// 分页的总条数
total: {
type: Number,
default: 0
},
// 每页显示的条数
pageSize: {
type: Number,
default: 10
},
// 分页
连续页码数
pagerCount: {
type: Number,
validator(value) {
return value % 2 === 1 && value >= 5 && value <= 21
},
default: 7
},
// 当前页码，支持 .sync 修饰符
currentPage: {
type: Number,
default: 1
},
// layout，支持结构自定义
layout: {
type: String,
default: 'total, sizes, prev, pager, next, jumper'
},
// 可选每页显示条数
pageSizes: {
type: Array,
default: () => [10, 20, 30, 40, 50, 100]
},
// 是否可以通过点击页码改变当前页码
pageChange: {
type: Boolean,
default: true
},
// 最多显示的页码数，当总页数超过该值时会折叠
maxPagers: {
type: Number,
default: 8
}
},
computed: {
// 缓存所有的页码
pagers() {
let currentPage = Number(this.currentPage)
const pageCount = this.pageCount
const pagerCount = this.pagerCount
const maxPagers = this.maxPagers
// 如果总页数小于最多显示页码数，则全部显示
if (pageCount <= maxPagers) {
const arr = range(1, pageCount)
return arr
}
let left = Math.floor(pagerCount / 2)
let right = pagerCount - left - 1
if (currentPage <= left) {
right = pagerCount - currentPage - 1
return range(1, pagerCount)
}
if (currentPage > pageCount - right) {
left = pagerCount - (pageCount - currentPage) - 1
return range(pageCount - pagerCount + 1, pageCount)
}
return range(currentPage - left, currentPage + right)
},
// 是否显示省略号(后省略)
showPrevMore() {
return this.pagers[0] > 1
},
// 是否显示省略号(前省略)
showNextMore() {
const pageCount = this.pageCount
const lastPager = this.pagers[this.pagers.length - 1]
return pageCount > this.maxPagers && lastPager < pageCount
},
// 显示哪些元素
showItems() {
const items = this.layout.split(',')
let result = []
items.forEach((item) => {
item = item.trim()
switch (item) {
case 'total':
result.push({
type: 'total',
text: `共${this.total}条`
})
break
case 'prev':
result.push({
type: 'prev',
text: '上一页'
})
break
case 'next':
result.push({
type: 'next',
text: '下一页'
})
break
case 'jumper':
result.push({
type: 'jumper'
})
break
case 'sizes':
result.push({
type: 'sizes',
pageSizes: this.pageSizes
})
break
case 'pager':
result.push({
type: 'pagers',
pagers: this.pagers
})
break
}
})
return result
},
// 总页数
pageCount() {
return Math.ceil(this.total / this.pageSize)
},
// 可选的每页显示条数
pageSizeOpts() {
return this.pageSizes.map((item) => {
return Number(item)
})
}
},
methods: {
handleChangePage(p) {
if (p === this.currentPage || !this.pageChange) {
return
}
this.currentPage = p
this.$emit('update:currentPage', p)
this.$emit('change', p)
},
handleLessPage(lessPageCount) {
this.handleChangePage(this.currentPage - lessPageCount)
},
handleMorePage(morePageCount) {
this.handleChangePage(this.currentPage + morePageCount)
},
handleChangePageSize(event) {
const pageSize = Number(event.target.value)
this.pageSize = pageSize
this.$emit('update:pageSize', pageSize)
this.$emit('size-change', pageSize)
this.handleChangePage(1)
}
}
}
// 获取一定区间内的数组
function range(left, right) {
const arr = []
for (let i = left; i <= right; i++) {
arr.push(i)
}
return arr
}
</script>
<style scoped>
.pagination {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 20px;
margin-bottom: 20px;
font-size: 14px;
}
ul {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
list-style-type: none;
}
li {
margin-right: 8px;
padding: 0 8px;
border-radius: 2px;
height: 28px;
line-height: 28px;
color: #666;
cursor: pointer;
&:hover {
color: #409EFF;
background-color: #ecf5ff;
}
}
li.active {
color: #409EFF !important;
background-color: #ecf5ff;
}
/* 显示每页显示条数的选择器 */
.page-size-selector {
display: flex;
align-items: center;
}
</style>
3624
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
