前言

近期有个数据大屏的项目，内部有个巡检列表，数据量是比较大的，需要做分页的处理，但是在大屏内呢又没有用到UI框架，但是只为一个分页而去使用一个UI框架的话显然是不太好的，所以呢就想自己实现一个简易版本的分页组件

初步思路

要实现分页功能，关键要素有四个：总条数、每页展示数量、当前页数以及显示页码按钮的数量。有了这些数据后，我们就可以计算出总页数，即总条数除以每页展示数量。同时，显示的页码按钮数量用于确定分页控件中应展示的页码数量，例如：...1, 2, 3, 4, 5...。

初步思路我们已经有了，那么我们就先实现一个基本的静态结构

  <div class="pagination">
    <a v-if="myCurrentPage <= 1" href="javascript:;" class="disabled">上一页</a>
    <a @click="changePage(myCurrentPage - 1)" v-else href="javascript:;"
      >上一页</a
    >
    <span v-if="pager.start > 1">...</span>
    <a
      @click="changePage(i)"
      href="javascript:;"
      :class="{ active: i === myCurrentPage }"
      v-for="i in pager.btnArr"
      :key="i"
      >{{ i }}</a
    >
    <span v-if="pager.end < pager.pageCount">...</span>
    <a
      v-if="myCurrentPage >= pager.pageCount"
      href="javascript:;"
      class="disabled"
      >下一页</a
    >
    <a @click="changePage(myCurrentPage + 1)" v-else href="javascript:;"
      >下一页</a
    >
  </div>

这个静态结构主要包括了页码按钮，以及“上一页”和“下一页”两个按钮。页码按钮部分用于展示当前页码及其前后范围的页码，并且当点击时会触发相应的页码切换。对于“上一页”和“下一页”按钮，需要根据当前页是否为第一页或最后一页进行判断，若为第一页或最后一页则将按钮置灰以表示不可点击。

算出展示页数

首先我们通过父组件传入了总条数数，页当前页数，以及每页展示条数，那么就可以根据这些值来进行计算。首先我们通过计算拿到总页数为多少页

const pageCount = Math.ceil(myTotal.value / myPageSize.value)

我们首先通过总条数/每页展示数量来拿到总页数。拿到总页数后我们下一步再计算要展示的页码。计算页码我们需要有当前激活的页码和需要展示的页码数量就可以计算出来

let start = myCurrentPage.value - Math.floor(btnCount.value / 2)
let end = start + btnCount.value - 1

首先我们通过当前激活的页码值拿到了开始页码，例如现在展示的数量为5个，那么当前激活的页码为7，那么开始页码就为7-(5/2)向下取整那么就为5，结束页码为9，激活的页码也刚好在中间，那么接下来只需要遍历一下，从star开始到end结束便可以拿到要展示的页码数值，但是还是有一些边界情况需要进行处理，比如当前激活页码为1时,比如一共就2页时

      if (start < 1) {
        start = 1
        end =
          start + btnCount.value - 1 > pageCount
            ? pageCount
            : start + btnCount.value - 1
      }
      // 2.2 如果结束页码大于总页数，需要重新计算
      if (end > pageCount) {
        end = pageCount
        start = end - btnCount.value + 1 < 1 ? 1 : end - btnCount.value + 1
      }

这里有两次判断，首先呢就是是否开始页数小于1，引入当先激活也是为1的话按照上面的计算公式则会出现问题，所以我们在这里加上边界条件的判断，然后再进行限制，然后在进行页码的提取

  for (let i = start; i <= end; i++) {
        btnArr.push(i)
      }

这样我们就拿到了要展示的页面，接下来就是循环展示了，这样一个简易版的的分页就实现了。

结尾

本文主要讲解了实现一个简易分页组件的思路。首先从静态结构入手，明确了所需数据和事件，然后逐步实现动态逻辑。组件所需的数据最好是可配置的，并提供默认值以提高组件的复用性和低耦合性。希望这个过程能够帮助大家在类似需求中快速实现自己的所需的组件。