html代码
<template>
<div id="page">
<span>本页共{{pageCon}}条数据</span>
<div>
<span>共{{totalPage}}条记录</span>
<span class="pageSize"><span @click="showFun" id="pageSize" class="el-icon-cdm-triangle-up">每页显示{{pageSize}}条</span>
<ul :class="['clearfix','sizes',{'noShowSizes':!showSizes}]" id="sizes" >
<li v-for=" (i,k) in sizes" :key="i" @click="changeSize(i)" :class="{'true':i==pageSize,'bottom':k>8,'right':(k+1)%3==0}">{{i}}</li>
</ul>
</span>
<span>{{currentPage+'/'+totalPageNum}}</span>
<span class="pageBtn el-icon-d-arrow-left" v-if="currentPage==1"></span>
<span class="pageBtn el-icon-arrow-left" v-if="currentPage==1"></span>
<span class="pageBtn pointer el-icon-d-arrow-left" @click="getDate(1)" v-if="currentPage>1"></span>
<span class="pageBtn pointer el-icon-arrow-left" @click="getDate('-')" v-if="currentPage>1"></span>
<span class="pageBtn el-icon-arrow-right" v-if="currentPage==totalPageNum"></span>
<span class="pageBtn el-icon-d-arrow-right" v-if="currentPage==totalPageNum"></span>
<span class="pageBtn pointer el-icon-arrow-right" @click="getDate('+')" v-if="currentPage<totalPageNum"></span>
<span class="pageBtn pointer el-icon-d-arrow-right" @click="getDate(totalPageNum)" v-if="currentPage<totalPageNum"></span>
</div>
</div>
</template>
js部分
export default {
props:['totalPage','pageCon'],//分别为总条数和当前页数量
data:function(){
return {
currentPage: 1, //当前页
pageSize: 10, //每页条数
sizes:[5,10,15,20,25,30,35,40,45,50,100,200],//当前页数量
showSizes:false//是否显示切换当前页数量
}
},
methods:{
changeSize(index){
this.showSizes=false
if(this.pageSize==index){//当前页
return
}
this.pageSize=index
this.getDate(1)
},
getDate(v){
let currentPage=this.currentPage//当前页码
let totalPageNum=this.totalPageNum//总页数
if(v=='-'){//下一页
this.currentPage=currentPage-1>1?currentPage-1:1
}else if(v=='+'){//上一页
this.currentPage=currentPage+1>=totalPageNum?totalPageNum:currentPage+1
}else{
this.currentPage=v
}
this.$emit('pageFun',this.currentPage,this.pageSize)//pageFun为父级页面请求接口方法
this.$nextTick(function(){
this.setPageWid()
})
},
showFun(){//是否展示切换当前页数量
if(this.$('#sizes').css('display')=='none'){
this.showSizes=true
}else{
this.showSizes=false
}
},
setPageWid(){
document.getElementById('page').style.width=document.getElementById('page').parentElement.clientWidth+'px'//获取分页组件父级宽度
}
},
computed:{
totalPageNum:function(){//总页数
return Math.ceil(this.totalPage/this.pageSize)
}
},
mounted:function(){
if(this.pageCon>this.pageSize){//显示分页切换到不足一页后切回时更改当前页数量
this.pageSize=this.pageCon
}
this.setPageWid()
},
watch: {
showSizes: function() {
var sizes=document.getElementById("sizes");
var pageSize=document.getElementById("pageSize");
document.onclick=function(event){
var e=event || window.event;//兼容ie和非ie的event
var aim=e.srcElement || e.target; //兼容ie和非ie的事件源
if(aim!=sizes&&aim!=pageSize){
sizes.classList.add("noShowSizes")
}else{
sizes.classList.remove("noShowSizes")
}
}
},
totalPage:function(nval,oval){
this.currentPage=1
this.setPageWid()
}
}
}
css部分
<style lang="less" scoped>
#page{
@color:#5cb2f5;
display: flex;position: fixed;bottom: 40px;z-index: 2;right: 40px;
background: @color;padding:5px;color:#fff;
&>span{
width: 150px;
}
&>div{
flex: 1;text-align:right;
.pageSize{
position: relative;margin-right: 5px;
span{
cursor: pointer;padding-right: 15px;
&:before{
position: absolute;right: 0;
}
}
.sizes{
position: absolute;left:0;top: -109px;width:170px;background:#fff;z-index: 1;display: block;
border: 1px solid #ddd;border-radius: 6px;overflow: hidden;
li{
float: left;width: 33.3%;cursor: pointer;background:#fff;padding: 3px;color: #333;
border-right: 1px solid #ddd; text-align: center;
border-bottom: 1px solid #ddd;
&:hover{
background: #f1f1f1;
}
}
li.true{
background: #f1f1f1;
}
li.bottom{
border-bottom: 0 none;
}
li.right{
border-right: 0 none;
}
}
.noShowSizes{display: none;}
}
.pointer{
display: inline-block;
cursor: pointer;
}
}
}
</style>
父级页码调用
<page @pageFun='getData' :totalPage='totalPage' :pageCon='pageCon' v-if="totalPage>pageSize"></page>
getData(page,pageSize) {
this.currentPage = page;
if (pageSize) {
this.pageSize = pageSize;
} else {
this.pageSize = 10;
}
this.getTableData()
},
getTableData(){
this.$axios
.get("/xxxx", {
params: {
pageSize: this.pageSize,
pageNum: this.currentPage
}
})
.then(res => {
this.totalPage = res.data.data.total;//总条数
this.pageCon=this.tableNum.length //当前页数量
})
}