Vue2.0中如何实现一个分页组件

本篇内容主要讲解"Vue2.0中如何实现一个分页组件"，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习"Vue2.0中如何实现一个分页组件"吧!

组件部分代码：

Vue.component('zpagenav', {  template: ``,  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 nextHtml = _this.nextHtml ? _this.nextHtml : '>';    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;     //前置省略号     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; i++) {     pageList.push({      class: page == i ? 'active' : '',      page: i,      html: i     });    }      if (end < pageCount - 1) {     //后置省略号     pageList.push({      class: 'dot',      page: page,      html: '...'     });    }      //尾页    if (pageCount > 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);    }   }  } });

到此，相信大家对"Vue2.0中如何实现一个分页组件"有了更深的了解，不妨来实际操作一番吧！这里是网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！