在实际开发需求，产品需要的分页组件比较简单，只可以一页页地翻，就是为了防止用于直接翻看最后的数据（因为有一些历史数据数据量比较大，查看的意义不大，检索效率比较低也比较忙，因为不希望用户在翻页的时候可以随意翻看很久之前的数据）
因此需要根据实际需求进行分页组件封装
以下封装的分页组件，勉强够用，但是还不够完善，有需要的用于可以再次基础上继续完善
<template>
<el-pagination @size-change="handleSizeChange" background @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="pageSizes" :page-size="pageSize" :total="total" :layout="layout">
<slot>
<ul class="el-pager">
<li class="number active">{{currentPage}}</li>
<li class="number" @click="handlePage(item)" v-for="item in pager">{{item}}</li>
</ul>
</slot>
</el-pagination>
</template>
<script>
export default {
props: {
currentPage: {
type: [String, Number],
default: 1
},
total: {
type: [String, Number],
default: 0
},
pageSizes: {
type: Array,
default:function(){
return [10,20,50,100,200,300,400]
}
},
pageSize: {
type: [String, Number],
default: 10
},
layout: {
type: String,
default: 'total,prev,slot,next,sizes'
}
},
data() {
return {
}
},
computed:{
pager:function(){
let pager=this.total/this.pageSize
pager=Math.ceil(pager)//总页数
if(pager<this.currentPage){
return []
}
let flag=this.currentPage+4
if(flag>pager){//大于总页数
let arr=[]
let total=pager-this.currentPage
for(let i=1;i<=total;i++){
arr.push(this.currentPage+i)
}
return arr
}else if(flag<=pager){
return [this.currentPage+1,this.currentPage+2,this.currentPage+3,this.currentPage+4]
}
}
},
methods: {
handlePage(page){
this.handleCurrentChange(page)
},
handleSizeChange(val) {
this.$emit('size-change', val)
},
handleCurrentChange(val) {
this.$emit('current-change', val)
}
}
} </script>
<style lang="scss" scoped>
.page {
text-align: center;
color: #409EFF;
} </style>
页面使用：
1、在main.js页面全局注册分页组件
// 全局注册分页组件
import newPagination from '@/components/newPagination'
Vue.component('newPagination', newPagination)
2、页面直接调用
<new-pagination @current-change="handleCurrentChangeExp" :page-size=listQryExp.limit layout="total, prev, pager, next" :total=totalExp></new-pagination>