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  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 //目前頁數量
        })
    }