本篇文章给大家分享的是有关怎么在VUE中实现一个分页组件,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。
分页组件
template
<template> <ul class="mo-paging"> <!-- prev --> <li :class="['paging-item', 'paging-item--prev', {'paging-item--disabled' : index === 1}]" @click="prev">prev</li> <!-- first --> <li :class="['paging-item', 'paging-item--first', {'paging-item--disabled' : index === 1}]" @click="first">first</li> <li :class="['paging-item', 'paging-item--more']" v-if="showPrevMore">...</li> <li :class="['paging-item', {'paging-item--current' : index === pager}]" v-for="pager in pagers" @click="go(pager)">{{ pager }}</li> <li :class="['paging-item', 'paging-item--more']" v-if="showNextMore">...</li> <!-- last --> <li :class="['paging-item', 'paging-item--last', {'paging-item--disabled' : index === pages}]" @click="last">last</li> <!-- next --> <li :class="['paging-item', 'paging-item--next', {'paging-item--disabled' : index === pages}]" @click="next">next</li> </ul> </template>
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 } } }
父组件中使用
<template> <div class="list"> <template v-if="count"> <ul> <li v-for="item in items">...</li> </ul> <mo-paging :page-index="currentPage" :totla="count" :page-size="pageSize" @change="pageChange"> </mo-paging> </template> </div> </template> <script> import MoPaging from './paging' export default { //显示的声明组件 components : { MoPaging }, data () { return { pageSize : 20 , //每页显示20条数据 currentPage : 1, //当前页码 count : 0, //总记录数 items : [] } }, methods : { //获取数据 getList () { //模拟 let url = `/api/list/?pageSize=${this.pageSize}¤tPage=${this.currentPage}` this.$http.get(url) .then(({body}) => { //子组件监听到count变化会自动更新DOM this.count = body.count this.items = body.list }) }, //从page组件传递过来的当前page pageChange (page) { this.currentPage = page this.getList() } }, mounted() { //请求第一页数据 this.getList() } } </script>
以上就是怎么在VUE中实现一个分页组件,小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注亿速云行业资讯频道。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。