【Vue】分页器的实现

对数据的具体分页操作在后台，在这里只需请求接口返回参数，实现【将不同页码数据、切换页码按钮展示】。主要就是对细节的逻辑判断。

效果示例

参数

pageNo:当前页码

pageSize:每页中展示多少条数据

total：一共多少条数据

pagerCount：中间连续的页码数量

计算属性：

totalPage(){
            return Math.ceil(this.total/this.pageSize);
}

界面

考虑以下情况：

1. 最理想状态：当前页码以及中间连续页码都触及不到左右两边：1...3 4 5 6 7...10

2. totalPage<=pagerCount: 1 2 3

3. 当前页码偏左：1 2 3 4 5 ... 10

4. 当前页码偏右：1 ...6 7 8 9 10

通过计算左右边界{start, end}实现;

对于1，start和end取以pageNo左右各连续页码的一半。

对于2， 直接 start=1, end=totalPage; 

对于3和4，要控制左右边界不超出1和totalPage。

startAndEnd(){
            let start=0,end=0;
            let {totalPage,pageNo,pagerCount}=this;
            if(totalPage<pagerCount){
                start=1;
                end=totalPage;
            }
            else{
                start=pageNo-parseInt(pagerCount/2);
                end=pageNo+parseInt(pagerCount/2);
                if(end>totalPage) {
                    end=totalPage;
                    start=end-pagerCount+1;
                }
                if(start<1) {
                    start=1;
                    end=pagerCount;
                }

            }
            return {start,end}
        }

切换页码

实现：当按下相应页码的按钮时，触发自定义事件并携带该页码参数，使用到分页器的组件内监听到自定义事件后重新发请求给服务器拿回更新的数据。

<template>
  <div class="pagination">
    <button :disabled="pageNo==1" @click="$emit('currentPage',pageNo-1)">上一页</button>
    <button v-if="startAndEnd.start>1" @click="$emit('currentPage',1)">1</button>
    <button v-if="startAndEnd.start>2">···</button>

    <button v-for="(item) in startAndEnd.end" :key="item" v-if="item>=startAndEnd.start" @click="$emit('currentPage',item)">{{ item }}</button>
    
    <button v-if="startAndEnd.end<totalPage-1">···</button>
    <button v-if="startAndEnd.end<totalPage" @click="$emit('currentPage',totalPage)">{{ totalPage }}</button>
    <button :disabled="pageNo==totalPage" @click="$emit('currentPage',pageNo+1)">下一页</button>
    
    <button style="margin-left: 30px">共 {{ total }} 条</button>
  </div>
</template>

使用到分页器的组件内：

<Pagination :pageSize="searchParams.pageSize" :total="total" :pageNo="searchParams.pageNo" :pagerCount="5" @currentPage="currentPage"/>

自定义事件：

currentPage(pageNo){
        this.searchParams.pageNo=pageNo;
        this.getData();
}

（浅浅记录下第一次实现分页器，虽然回过头看好像挺简单...）