vue3中实现自定义分页器

1.为什么要使用分页器？

    在如今前后端分离的情况下，很多时候后端所存储的数据甚至上千万行，那么在获取这个数据列表的时候，前端是直接获取下来吗？显然是不可能的，因为获取下来进行渲染的时候，会增加页面的加载时间，那么大致的处理方法如下： 

1.数据量小的时候：前端可以获取数据来进行分页(数据量较大的时候不推荐)

2.数据量大的时候：后端进行相关的分页，然后就只需要将总页数和当前页返回给前端

2.分页器的使用

在这里我就使用的是后端进行分页，返回给前端具体的总页码数和当前页数来实现的具体分页器

其实分页的核心思想就是搞清楚  当前页  ---  总页数   之前的关系核心代码如下

    const pageCollege = computed(()=>{
      console.log(123);
      let pageno = pageData.pageNo
      let pagetotal = pageData.pageTotal
      if(pagetotal < 7){
        return pagetotal
      }
      if(pageno <= 5){
        return [1,2,3,4,5,'...',pagetotal]
      }else if(pageno > pagetotal - 5){
        return [1,'...',pagetotal-4,pagetotal-3,pagetotal-2,pagetotal-1,pagetotal]
      }else{
        return [1,'...',pageno-1,pageno,pageno+1,'...',pagetotal]
      }
    })

其中是主要的就是依赖的Vue中的计算属性的相关知识，通过修改当前的pageNo来重新计算需要展示给用户的页码数是多少，其实就只要搞清楚这一个核心点，那样分页器的原理就弄清楚了。分页器的制作就成功了一半

    //上一页的方法
    function perPage(){
      if(pageData.pageNo === 1){
        pageData.pageNo = 1
      }else{
        pageData.pageNo = pageData.pageNo - 1
      }
    }
    //下一页的方法 
    function nextPage(){
      if(pageData.pageNo == pageData.pageTotal){
          pageData.pageNo = pageData.pageTotal
      }else{
          pageData.pageNo = pageData.pageNo + 1
      }
    }
    //点击具体的一页
    function currentPage(page){
      if(page === '...'){
        return ;
      }else{
        pageData.pageNo = page
        pageCollege
      }
    } 

其中点击上一个和下一页就只需要判断是否到达两个边界，然后再对应的修改其中的pageNo中的数据就行了，因为上面的那个计算属性是依赖于这个的，一但pageNo发生了修改，那么将重新计算对应的展示给用户的页码数 

最终代码如下，如果要将其封装为一个组件的话，就对应从父组件中将当前页码数和总页数对应的传递到组件中动态显示就行

<template>
  <div class="pagerview">
    <div class="pagerBox centerLocation">
      <ul class="pagination">
        <li @click="perPage">
          <a aria-label="Previous">
            <span aria-hidden="true">&laquo;</span>
          </a>
        </li>
        <li v-for="(page,index) in pageNumber.value" :key="index" :class="{ 'active': page === pageData.pageNo }"
          @click="currentPage(page)">
          <a>
            {{page}}
          </a>
        </li>
        <li @click="nextPage" :class="{ disabled: disabledNext }">
          <a aria-label="Next">
            <span aria-hidden="true">&raquo;</span>
          </a>
        </li>

      </ul>
    </div>
  </div>
</template>

<script>
import { reactive,computed } from 'vue';
export default {
  name: 'pageList',
  setup(){
    const pageData = reactive({
      pageNo: 1,
      pageTotal: 20,
    })

    //根据传递的pageNo来判断前后关系
    const pageCollege = computed(()=>{
      console.log(123);
      let pageno = pageData.pageNo
      let pagetotal = pageData.pageTotal
      if(pagetotal < 7){
        return pagetotal
      }
      if(pageno <= 5){
        return [1,2,3,4,5,'...',pagetotal]
      }else if(pageno > pagetotal - 5){
        return [1,'...',pagetotal-4,pagetotal-3,pagetotal-2,pagetotal-1,pagetotal]
      }else{
        return [1,'...',pageno-1,pageno,pageno+1,'...',pagetotal]
      }
    })

    //判断下面的条数
    const pageNumber = computed(()=>{
      return pageCollege
    }) 

    //上一页的方法 
    function perPage(){
      if(pageData.pageNo === 1){
        pageData.pageNo = 1
      }else{
        pageData.pageNo = pageData.pageNo - 1
      }
    }
    //下一页的方法 
    function nextPage(){
      console.log(pageData.pageNo,pageData.pageTotal);
      if(pageData.pageNo == pageData.pageTotal){
          pageData.pageNo = pageData.pageTotal
      }else{
          pageData.pageNo = pageData.pageNo + 1
      }
    }
    //点击确定的一页
    function currentPage(page){
      if(page === '...'){
        return ;
      }else{
        pageData.pageNo = page
        pageCollege
      }
    } 



    return {
      pageData,
      //方法 
      perPage,
      nextPage,
      currentPage,
      //计算属性 
      pageCollege,
      pageNumber,
    }
  },
}
</script>

<style lang="less" scoped>
.pagerview {
  margin: 25px 0px 20px 0;

  .pagerBox {
    margin: 5px 0px;
    text-align: center;

    .pagination {
      margin-bottom: 0px;

      li {
        margin: 0 5px;
        padding: 0 4px;
        display: inline-block;
        min-width: 50px;
        height: 28px;
        line-height: 28px;
        font-size: 14px;
        border-radius: 2px;
        background-color: #f4f4f5;
        color: #606266;
        cursor: pointer;
      }

      .active {
        cursor: not-allowed;
        background-color: #409eff;
        color: #fff;
      }
    }

    .disabledBox {
      display: none;
    }
  }
}
</style> 

3.分页器的总结

其实分页器的存在就是为了加快页面的渲染速度，将后端的大量数据通过分页的形式展示给用户，其中分页器的核心思想就是要通过当前页来计算出要展示给用户看的页码数。

例如 当前是第8页  分页器展示5页 ，总共有20页  那么就计算出展示的为  1 ...  8  ... 20，然后就是根据用户点击的不同，得出不同的当前页，然后就在计算出又要展示出来的页码。依次内推，便完成了分页器的相关制作。