VUEJS分頁_刷新當前頁

開發中後端頁面列表時候有時候需要分頁，又需要操作成功後在當前頁籤這時候就麻煩了

開發思路

1 獲取總的數據條數
2 當前分頁每頁顯示的條數
3 計算可分頁多少 ==> 可分頁數量= Math.ceil(總數量 / 每頁數量)
4 臨時會話存儲當前點擊頁數 sessionStorage.getItem(‘thisPageIndex’)
5 頁面刷新數據讀取會話存儲 sessionStorage.getItem(‘thisPageIndex’)

• Math（JavaScript內置的執行數學任務函數集合）

• 注：Math.ceil 函數 是計算向上取整
  具體Math的子集函數請移步 Math函數子集函數

封裝公用組件

	這裏封裝成組件調用模式

調用方式html

<PAGEDOWN v-if="totalPage > 0" :parentDefaulePage='parentDefaulePage' :totalPage='totalPage'></PAGEDOWN>

// 父及函數
parentDefaulePage(flag, index){
	this.pages = !flag ? sessionStorage.getItem('thisPageIndex'):index	
    this._initData();
},

引入方式Javascript

參數備註

parentDefaulePage點擊回調函數進行分頁請求
totalPage 總的分頁條數

import PAGEDOWN from '@/components/pageDwon.vue'
// 及VUE註冊組件
components:{
   PAGEDOWN
},

---

以下是組件頁面

---

組件文件html=> pageDwon.vue
具體的樣式需要子集調整，當前樣式並不能適用你的項目

<template>
    <div class='fotCls'>
        <div class='ftLft'>
            <span class='prxt pano' @click="clickPageFunc(0, true)">&lt;上一頁</span>
            <span :class="{sp: true, active: (clickSel == indx+1 ? true: false)}" v-for="(itm, indx) in totalPage" :key="indx"  @click="clickPageFunc(1, indx+1)">{{indx+1}}</span>
            <span class='next' @click="clickPageFunc(0, false)">下一頁&gt;</span>
        </div>
        <div class='ftrgt'>共{{totalPage}}頁,到第<i><input type="number" v-model="pages" min="1"/></i>頁 <span @click="clickPageFunc(1, pages)">確定</span></div>
    </div>
</template>
<script>
export default {
    data(){
        return {
            pages:1,
            clickSel: 1,
        }
    },
    props:{
        parentDefaulePage:{ // 點擊頁碼和分頁函數進行回調
            type: Function,
            default: null
        },
        totalPage: Number  // 當前總的分頁數量
    },
    methods:{
        clickPageFunc(num, flag){
        	sessionStorage.setItem('thisPageIndex', flag)
            switch(num){
                case 0:
                    this.parentDefaulePage(true, flag)
                    break;
                case 1:
                    this.parentDefaulePage(false,  flag)
                    this.clickSel = flag;
                    break;
            }

        }
    }
}
</script>
<style lang="scss" scoped>
.fotCls{
    text-align:right;
    height: 37px;
    line-height: 37px;
    margin-top: 20px;
    .ftLft{
        display: inline-block;
        line-height: 37px;
        width: 70%;
        font-size: 15px;
        color: #373737;
        .prxt, .next{
            width: 72px;
            height: 37px;
            display: inline-block;
            font-size: 15px;
            color: #373737;
            border:1px solid #EDEDED;
            text-align: center;
        }
        .pano{
            color: #CCCCCC;
        }
        .sp{
            display: inline-block;
            width: 37px;
            height: 37px;
            font-size: 13px;
            color: #373737;
            text-align: center;
            line-height: 37px;
            border:1px solid #EDEDED;
            &.active{
                background-color: #D43839;
                color: #fff;
                border:1px solid #D43839;
            }
        }
        .next{}
    }
    .ftrgt{
        font-size: 15px;
        color: #999999;
        display: inline-block;
        input{
            width: 37px;
            height: 23px;
            font-size: 13px;
            color: #999999;
        }
        span{
            font-size: 13px;
            color: #373737;
            padding: 5px 10px;
            border-radius: 5px;
            width:45px;
            height:23px;
            border:1px solid rgba(237,237,237,1);
            &:hover{
                background-color: #D43839;
            }
        }
    }
    }
</style>

注：clickPageFunc 函數有兩個參數

clickPageFunc 回調父及函數 參數爲

當num 參數爲0 時 ==》 當前上一頁或者下一頁，以BooLean值爲準
當num 參數爲1 時 ==》 當前頁數固定頁碼跳轉，包括定向到具體哪一頁
具體以 sessionStorage.setItem(‘thisPageIndex’, flag) 及 調用父組件方法爲準