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) 及 调用父组件方法为准