这篇文章主要为大家详细介绍了基于Vue2.0的分页组件的相关资料，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了Vue2.0分页组件的具体实现代码，供大家参考，具体内容如下
整个示例打包了，有需要的可以下载，有不对的地方欢迎指出：vue分页组件
组件部分代码：
Vue.component('zpagenav', { template: `<nav class="zpagenav">` + `<ul class="page-ul">` + `<li>` + `</li>` + `</ul>` + `<span class="total">共 {{total}} 条</span>` + `</nav>`, props: { prevHtml: String, nextHtml: String, page: Number, total: Number, pageSize: Number, maxPage: Number }, computed: { pageList: function () { var _this = this, pageList = []; let pageCount = Math.ceil(_this.total / _this.pageSize); let page = _this.page; let prevHtml = _this.prevHtml ? _this.prevHtml : ''; let maxPage = _this.maxPage ? _this.maxPage : 9; let hasPrev = page > 1; let hasNext = page = p1) { start = page - p0; //前置省略号 pageList.push({ class: 'dot', page: page, html: '...' }); } else { start = 2; } var p2 = page + p0; if (p2 <pageCount) { end = p2; } else { end = pageCount - 1; } //页码列表 for (let i = start; i <= end; <div style="color:transparent">本文来源gaodai.ma#com搞##代!^码@网*</div>i++) { pageList.push({ class: page == i ? 'active' : '', page: i, html: i }); } if (end 1) { pageList.push({ class: page == pageCount ? 'active' : '', page: pageCount, html: pageCount }); } //下一页 pageList.push({ class: hasNext ? '' : 'disabled', page: hasNext ? page + 1 : page, html: nextHtml }); return pageList; } }, methods: { setPage: function (item) { if (item.class == '') { this.$emit('pagehandler', item.page); } } } });
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持gaodaima搞代码网。
以上就是基于Vue2.0的分页组件的详细内容，更多请关注gaodaima搞代码网其它相关文章！
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：基于Vue2.0的分页组件
转载请注明原文链接：基于Vue2.0的分页组件
