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

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

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

在这里插入图片描述

封装分页器组件

共 {
{ total }} 条
< 上一页

{
{ item }}

下一页 >

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)
引用