VUE实现一个分页组件的示例

前端之家收集整理的这篇文章主要介绍了VUE实现一个分页组件的示例前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

分页是WEB开发中很常用的功能,尤其是在各种前后端分离的今天,后端API返回数据,前端根据数据的count以及当前页码pageIndex来计算分页页码并渲染到页面上已经是一个很普通很常见的功能了。从最开始的jquery时代到现在的各种各样的前端框架时代,分页功能都是必不可少的。

分页大多数(基本上)情况下都是对异步数据列表的处理,这里首先需要明白一下分页的流程。

在已知每页显示数据量pageSize以及当前页码pageIndex的情况下:

  • 请求API,返回第一屏数据(pageSize内)以及所有相关条件的数据总量count
  • 将数据总量传递给page组件,来计算页码并渲染到页面
  • 点击页码,发送请求获取页码的数据,返回数据总量count以及该页码下的数据条目。

由于获取数据条件的变化(假设是个搜索,关键词变了),count是不定的;再或者,有个select下拉框,来控制每页显示的数据量pageSize,当它变化的时候,总页码肯定也是要变化的。因此很多情况下要重新计算页码并渲染。

了解了流程,在Vue中实现一个分页组件也就变得简单了。

简单处理,样式类似于bootstrap的分页组件,在第一页时,禁用上一页,以及首页按钮;在最后一页时,禁用下一页,以及尾页按钮;超出范围的页码以…来代替,效果图如下:

由于获取数据条件的变化(假设是个搜索,关键词变了),count是不定的;再或者,有个select下拉框,来控制每页显示的数据量pageSize,当它变化的时候,总页码肯定也是要变化的。因此很多情况下要重新计算页码并渲染。

了解了流程,在Vue中实现一个分页组件也就变得简单了。

简单处理,样式类似于bootstrap的分页组件,在第一页时,禁用上一页,以及首页按钮;在最后一页时,禁用下一页,以及尾页按钮;超出范围的页码以…来代替,效果图如下:

分页组件 template

  • <!-- first -->
    <li :class="['paging-item','paging-item--first',{'paging-item--disabled' : index === 1}]" @click="first"&gt;first</li>
    
    <li :class="['paging-item','paging-item--more']" v-if="showPrevMore"&gt;...</li>
    
    <li :class="['paging-item',{'paging-item--current' : index === pager}]" v-for="pager in pagers" @click="go(pager)"&gt;{{ pager }}</li>
    
    <li :class="['paging-item','paging-item--more']" v-if="showNextMore"&gt;...</li>
    
    <!-- last -->
    <li :class="['paging-item','paging-item--last',{'paging-item--disabled' : index === pages}]" @click="last"&gt;last</li>
    
    <!-- next -->
    <li :class="['paging-item','paging-item--next',{'paging-item--disabled' : index === pages}]" @click="next"&gt;next</li>

style(scss)

.paging-item { display: inline; font-size: 14px; position: relative; padding: 6px 12px; line-height: 1.42857143; text-decoration: none; border: 1px solid #ccc; background-color: #fff; margin-left: -1px; cursor: pointer; color: #0275d8; &:first-child { margin-left: 0; } &:hover { background-color: #f0f0f0; color: #0275d8; } &.paging-item--disabled,&.paging-item--more{ background-color: #fff; color: #505050; } //禁用 &.paging-item--disabled { cursor: not-allowed; opacity: .75; } &.paging-item--more,&.paging-item--current { cursor: default; } //选中 &.paging-item--current { background-color: #0275d8; color:#fff; position: relative; z-index: 1; border-color: #0275d8; } } }

javascript

//页面中的可见页码,其他的以...替代,必须是奇数 perPages : { type : Number,default : 5 },//当前页码 pageIndex : { type : Number,default : 1 },//每页显示条数 pageSize : { type : Number,default : 10 },//总记录数 total : { type : Number,},methods : { prev(){ if (this.index > 1) { this.go(this.index - 1) } },next(){ if (this.index < this.pages) { this.go(this.index + 1) } },first(){ if (this.index !== 1) { this.go(1) } },last(){ if (this.index != this.pages) { this.go(this.pages) } },go (page) { if (this.index !== page) { this.index = page //父组件通过change<a href="https://www.jb51.cc/tag/fangfa/" target="_blank" class="keywords">方法</a>来接受当前的<a href="https://www.jb51.cc/tag/yema/" target="_blank" class="keywords">页码</a> this.$emit('change',this.index) } }

},computed : {

//计算总<a href="https://www.jb51.cc/tag/yema/" target="_blank" class="keywords">页码</a>
pages(){
  return Math.ceil(this.size / this.limit)
},//计算<a href="https://www.jb51.cc/tag/yema/" target="_blank" class="keywords">页码</a>,当count等变化时<a href="https://www.jb51.cc/tag/zidong/" target="_blank" class="keywords">自动</a>计算
pagers () {
  const array = []
  const perPages = this.perPages
  const pageCount = this.pages
  let current = this.index
  const _offset = (perPages - 1) / 2


  const offset = {
    start : current - _offset,end  : current + _offset
  }

  //-1,3
  if (offset.start < 1) {
    offset.end = offset.end + (1 - offset.start)
    offset.start = 1
  }
  if (offset.end > pageCount) {
    offset.start = offset.start - (offset.end - pageCount)
    offset.end = pageCount
  }
  if (offset.start < 1) offset.start = 1

  this.showPrevMore = (offset.start > 1)
  this.showNextMore = (offset.end < pageCount)

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

  return array
}

},data () {
return {
index : this.pageIndex,//当前页码
limit : this.pageSize,//每页显示条数
size : this.total || 1,//总记录数
showPrevMore : false,showNextMore : false
}
},watch : {
pageIndex(val) {
this.index = val || 1
},pageSize(val) {
this.limit = val || 10
},total(val) {
this.size = val || 1
}
}
}

父组件中使用

  • 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

    原文链接:https://www.f2er.com/vue/36460.html

    猜你在找的Vue相关文章