解决分页器跳转页数跨度大而引起的请求数据量大的问题

实现效果：仅一页时不显示分页器，页数固定只显示十个数字，页数跳转固定最多只能跨5页跳转

• 封装分页器组件

<div v-if="pageCount>1" class="do-pagination">
  <span v-if="total" class="t">共&nbsp;{{ total }}&nbsp;条</span>
  <span
    v-if="page!==1"
    class="n"
    :class="{disable:page===1}"
    @click="pre"
  >&lt;&nbsp;上一页</span>
  <span
    v-for="(item,index) in pageList"
    :key="index"
    class="p pointer"
    :class="{active:item===page}"
    @click="pageChange(item)"
  >
    {{ item }}
  </span>
  <span
    v-if="page!==pageCount"
    class="n"
    :class="{disable: page === pageCount}"
    @click="next"
  >下一页&nbsp;&gt;</span>
</div>

export default {
  name: 'Index',
  props: {
    total: {
      type: Number,
      default: 0
    },
    pageSize: {
      type: Number,
      default: 20
    },
    pageNum: {
      type: Number,
      default: 1
    },
    currPage: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      page: this.pageNum || 1,
      pageCount: 1,
      pageList: undefined
    }
  },
  watch: {
    page(newValue, oldValue) {
      if (this.pageCount <= 10) {
        this.pageList = this.pageCount
      } else if (this.pageCount > 10 && newValue > 5) {
        this.pageList = []
        if (newValue + 4 > this.pageCount) {
          for (let i = 0; i < 10; i++) {
            this.pageList.unshift(this.pageCount - i)
          }
        } else {
          for (let i = newValue - 5; i <= newValue + 4; i++) {
            this.pageList.push(i)
          }
        }
      } else {
        this.pageList = 10
      }
      window.scrollTo({
        top: 0,
        left: 0,
        behavior: 'smooth'
      })
    },
    total: {
      handler: function(newValue) {
        this.pageCount = newValue % this.pageSize === 0 ? this.total / this.pageSize : Math.floor(this.total / this.pageSize) + 1
        this.pageList = this.pageCount <= 10 ? this.pageCount : 10
      }
    }
  },
  methods: {
    pageChange(d) {
      this.page = d
      this.$emit('current-change', d)
    },
    pre() {
      if (this.page > 1) {
        this.page--
        this.pageChange(this.page)
      }
    },
    next() {
      if (this.page < this.pageCount) {
        this.page++
        this.pageChange(this.page)
      }
    }
  }
}

.do-pagination{
  font-size: 14px;
  font-weight: 500;
	padding: 14px 15px;
	/*background-color: #f5f5f5;*/
  white-space: nowrap;
  user-select: none;
  span{
    display: inline-block;
    margin-right: 12px;
    text-align: center;
    vertical-align: middle;
    line-height: 36px;
    border: 0;
    border-radius: 6px;
    background-color: #fff;
    color: #409EFF;
  }
	.n{
		width: 80px;
		padding: 0;
		line-height: 36px;
    border: 0;
    border-radius: 6px;
    background-color: #fff;
    cursor: pointer;
    &.disable{
      cursor: not-allowed;
      color: inherit;
    }
	}
	.p{
    padding: 0 12px;
		min-width: 36px;
		height: 36px;
    transition: all 0.32s ease;
		&.active{
			background: #409EFF;
			color: #fff;
		}
	}
  .t{
    padding: 0 12px;
    min-width: 36px;
    height: 36px;
    font-size: 13px;
    font-weight: 400;
    color: #606266;
    background-color: unset;
  }
}

为了方便使用，将封装好的组件挂载在全局

• 在工具utils中引入

import DoPagination from '@/components/DoPagination'
export default (Vue)=>{
  Vue.component('DoPagination',DoPagination)
}

• 挂载全局

import components from '@/utils/components'
Vue.use(components)

• 引用

<do-pagination
  class="txt-center"
  :page-size="activityQuery.pageSize"
  :total="activityQuery.total"
  @current-change="getActivityList"
/>