Shulou(Shulou.com)05/31 Report--

This article focuses on "how to implement a paging component in Vue2.0". Interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn how to implement a paging component in Vue2.0.

Component part code:

Vue.component ('zpagenav', {template: ``+ `) {{total}}` +``, 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

< pageCount; //上一页 pageList.push({ class: hasPrev ? '' : 'disabled', page: hasPrev ? page - 1 : page, html: prevHtml }); //首页 pageList.push({ class: page == 1 ? 'active' : '', page: 1, html: 1 }); var p0 = Math.floor(maxPage / 2); var p1 = 1 + 2 + p0; //首页+省略至少2个页码+中间页面数的一半 var start, end; if (page >

= p1) {start = page-p0; / / prefixed ellipsis pageList.push ({class: 'dot', page: page, html:'...'});} else {start = 2;} var p2 = page + p0; if (p2 < pageCount) {end = p2;} else {end = pageCount-1 } / / Page number list for (let I = start; I 1) {pageList.push ({class: page = = pageCount? 'active':', page: pageCount, html: pageCount});} / / next page 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);}). At this point, I believe you have a deeper understanding of "how to implement a paging component in Vue2.0". Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.