怎么在VUE中实现一个分页组件-创新互联
本篇文章给大家分享的是有关怎么在VUE中实现一个分页组件,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。
专注于为中小企业提供成都网站制作、成都做网站服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业长岭免费做网站提供优质的服务。我们立足成都,凝聚了一批互联网行业人才,有力地推动了上千家企业的稳健成长,帮助中小企业通过网站建设实现规模扩充和转变。分页组件
template
- prev
- first
- ...
- {{ pager }}
- ...
- last
- next
style(scss)
.mo-paging { display: inline-block; padding: 0; margin: 1rem 0; font-size: 0; list-style: none; user-select: none; > .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
export default { name : 'MoPaging', //通过props来接受从父组件传递过来的值 props : { //页面中的可见页码,其他的以...替代, 必须是奇数 perPages : { type : Number, default : 5 }, //当前页码 pageIndex : { type : Number, default : 1 }, //每页显示条数 pageSize : { type : Number, default : 10 }, //总记录数 total : { type : Number, default : 1 }, }, 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方法来接受当前的页码 this.$emit('change', this.index) } } }, computed : { //计算总页码 pages(){ return Math.ceil(this.size / this.limit) }, //计算页码,当count等变化时自动计算 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 } } }
父组件中使用
- ...
以上就是怎么在VUE中实现一个分页组件,小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注创新互联成都网站设计公司行业资讯频道。
另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
标题名称:怎么在VUE中实现一个分页组件-创新互联
转载源于:http://myzitong.com/article/dihges.html