vue自定义分页

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 //当前页数量
        })
    }