基于vue的无总页数分页组件

最新推荐文章于 2024-02-29 13:24:28 发布

NirvanaRebirth

最新推荐文章于 2024-02-29 13:24:28 发布

阅读量2.4k

点赞数

分类专栏：前端文章标签： vue 分页

本文链接：https://blog.csdn.net/NirvanaRebirth/article/details/92412794

版权

本文介绍了一个在不获取总页数的情况下，基于Vue实现的分页组件。该组件通过预查询一定数量的页数来动态显示分页，并详细说明了其显示原理、组件模板、JS部分的实现，包括组件参数、计算属性等内容，同时提供了CSS样式和实际效果展示。

摘要由CSDN通过智能技术生成

概述

在项目中遇到一个返回结果不包含总页数，通过预计后面还有的页数来进行分页显示的需求，利用iview的分页组件样式自己制作了一个分页组件，记录一下。

显示原理

组件不需要数据的总页数，通过传入当前页后预查询包含数据的页数进行显示，其中最大预查询页数与组件最多显示页码数相同，当前页显示时向最多可显示页码数中间靠拢。

例：
假设共有100条数据，每页显示10条，最多显示5个页码。
查询第1-5页时，传入参数5；
查询第6页时，传入参数4；
查询第7页时，传入参数3；
查询第8页时，传入参数2；
查询第9页时，传入参数1；
查询第10页时，传入参数0；

组件模板

直接采用了iview相关的样式类和element-ui选择器，包含总条数显示以及每一页行数选择，具体样式可具体修改。

<template>
  <div style="margin: 10px;">
    <ul class="ivu-page mini" style="float: right">
      <span class="ivu-page-total" v-if="totals !== undefined">共 {
   {
   totals}} 条</span>
      <li title="上一页" class="ivu-page-prev" :class="{ 'ivu-page-disabled': current == 1 }" 
      @click="setPage(current - 1)">
        <a><i class="ivu-icon ivu-icon-ios-arrow-left"></i></a>
      </li>
      <li v-for="item in pageList" :title="item" class="ivu-page-item my_page_item" 
      :class="{ 'ivu-page-item-active': item == current }" @click="setPage(item)">
        <a>{
   {
   item}}</a>
      </li>
      <li title="下一页" class="ivu-page-next" :class=