摘要:分页组件通过来接受从父组件传递过来的值页面中的可见页码,其他的以替代必须是奇数当前页码每页显示条数总记录数父组件通过方
分页组件
- prev
- first
- ...
- {{ pager }}
- ...
- last
- next
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 } } }
父组件使用
- ...
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/51948.html
摘要:项目中遇到切换列表,每个都需要分页的需求,分页流程具有相似性,于是想将分页封装为组件,方便应用。组件的复用完成了以上组件,在对其他分页的页面,可以直接复用。 项目中遇到 tab切换列表,每个tab都需要分页的需求,分页流程具有相似性,于是想将分页封装为组件,方便应用。 组件的应用已写成一个小demo,效果如下图所示(数据用mock模拟): showImg(https://segment...
摘要:所以这就导致,页面内容正确,但是页码高亮依旧是第一页解决办法我们需要在之后刷新这个分页组件或者让分页组件的后于之后加载到页面。然后再次测试,发现完美解决问题。 问题描述 当前页面如下showImg(https://segmentfault.com/img/bVbjJ7a); 然后点击页码跳到第3页,然后在第三页点击页面链接跳转到新的页面showImg(https://segmentfa...
摘要:的分页组件默认为的分页样式,但如果我们用的并不是或者说分页的结构不一样,这时我们需要自定义分页。进一步,可以看到通过继承并对方法进行重写,由此可见,我们可以通过继承类并对方法进行重写,就可以自定义分页的样式了。 Laravel 的分页组件默认为 Bootstrap 的分页样式,但如果我们用的并不是 Bootstrap 或者说分页的 HTML结构不一样,这时我们需要自定义...
摘要:第九集从零开始实现分页器组件本集定位分页器这个组件也算是个老朋友了还记得刚学的时候写个分页器要行代码要是能穿越回去我得好好教教我自己设计模式 第九集: 从零开始实现( 分页器组件 ) 本集定位: 分页器这个组件也算是个老朋友了, 还记得刚学js的时候, 写个分页器要300行代码,要是能穿越回去, 我得好好教教我自己设计模式
摘要:第九集从零开始实现分页器组件本集定位分页器这个组件也算是个老朋友了还记得刚学的时候写个分页器要行代码要是能穿越回去我得好好教教我自己设计模式 第九集: 从零开始实现( 分页器组件 ) 本集定位: 分页器这个组件也算是个老朋友了, 还记得刚学js的时候, 写个分页器要300行代码,要是能穿越回去, 我得好好教教我自己设计模式
阅读 1508·2021-08-09 13:47
阅读 2767·2019-08-30 15:55
阅读 3491·2019-08-29 15:42
阅读 1114·2019-08-29 13:45
阅读 3008·2019-08-29 12:33
阅读 1742·2019-08-26 11:58
阅读 983·2019-08-26 10:19
阅读 2410·2019-08-23 18:00