vue2.0如何實(shí)現(xiàn)分頁(yè)組件

小編給大家分享一下vue2.0如何實(shí)現(xiàn)分頁(yè)組件，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

創(chuàng)新互聯(lián)是一家朝氣蓬勃的網(wǎng)站建設(shè)公司。公司專注于為企業(yè)提供信息化建設(shè)解決方案。從事網(wǎng)站開(kāi)發(fā)，網(wǎng)站制作，網(wǎng)站設(shè)計(jì)，網(wǎng)站模板，微信公眾號(hào)開(kāi)發(fā)，軟件開(kāi)發(fā)，小程序設(shè)計(jì)，10余年建站對(duì)砂巖浮雕等多個(gè)領(lǐng)域，擁有豐富的網(wǎng)站維護(hù)經(jīng)驗(yàn)。

最近使用vue2.0重構(gòu)項(xiàng)目, 需要實(shí)現(xiàn)一個(gè)分頁(yè)的表格, 沒(méi)有找到合適的分頁(yè)組件, 就自己寫(xiě)了一個(gè), 效果如下:

vue2.0如何實(shí)現(xiàn)分頁(yè)組件

該項(xiàng)目是使用 vue-cli搭建的, 如果你的項(xiàng)目中沒(méi)有使用webpack,請(qǐng)根據(jù)代碼自己調(diào)整:

首先新建pagination.vue文件, 所有組件的代碼都寫(xiě)在這里, 寫(xiě)這樣的組件并沒(méi)有什么太大的難度, 主要是解決父子組件之間值傳遞的問(wèn)題

<template>
 <nav>
  <ul class="pagination">
   <li :class="{'disabled': current == 1}"><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click="setCurrent(current - 1)"> &laquo; </a></li>
   <li :class="{'disabled': current == 1}"><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click="setCurrent(1)"> 首頁(yè) </a></li>
   <li v-for="p in grouplist" :class="{'active': current == p.val}"><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" 
                                     @click="setCurrent(p.val)"> {{ p.text }} </a>
   </li>
   <li :class="{'disabled': current == page}"><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click="setCurrent(page)"> 尾頁(yè) </a></li>
   <li :class="{'disabled': current == page}"><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click="setCurrent(current + 1)"> &raquo;</a></li>
  </ul>
 </nav>
</template>
<script type="es6">
 export default{
  data(){
   return {
    current: this.currentPage
   }
  },
  props: {
   total: {// 數(shù)據(jù)總條數(shù)
    type: Number,
    default: 0
   },
   display: {// 每頁(yè)顯示條數(shù)
    type: Number,
    default: 10
   },
   currentPage: {// 當(dāng)前頁(yè)碼
    type: Number,
    default: 1
   },
   pagegroup: {// 分頁(yè)條數(shù)
    type: Number,
    default: 5,
    coerce: function (v) {
     v = v > 0 ? v : 5;
     return v % 2 === 1 ? v : v + 1;
    }
   }
  },
  computed: {
   page: function () { // 總頁(yè)數(shù)
    return Math.ceil(this.total / this.display);
   },
   grouplist: function () { // 獲取分頁(yè)頁(yè)碼
    var len = this.page, temp = [], list = [], count = Math.floor(this.pagegroup / 2), center = this.current;
    if (len <= this.pagegroup) {
     while (len--) {
      temp.push({text: this.page - len, val: this.page - len});
     }
     ;
     return temp;
    }
    while (len--) {
     temp.push(this.page - len);
    }
    ;
    var idx = temp.indexOf(center);
    (idx < count) && ( center = center + count - idx);
    (this.current > this.page - count) && ( center = this.page - count);
    temp = temp.splice(center - count - 1, this.pagegroup);
    do {
     var t = temp.shift();
     list.push({
      text: t,
      val: t
     });
    } while (temp.length);
    if (this.page > this.pagegroup) {
     (this.current > count + 1) && list.unshift({text: '...', val: list[0].val - 1});
     (this.current < this.page - count) && list.push({text: '...', val: list[list.length - 1].val + 1});
    }
    return list;
   }
  },
  methods: {
   setCurrent: function (idx) {
    if (this.current != idx && idx > 0 && idx < this.page + 1) {
     this.current = idx;
     this.$emit('pagechange', this.current);
    }
   }
  }
 }
</script>
<style lang="less">
 .pagination {
  overflow: hidden;
  display: table;
  margin: 0 auto;
  /*width: 100%;*/
  height: 50px;
 li {
  float: left;
  height: 30px;
  border-radius: 5px;
  margin: 3px;
  color: #666;
 &
 :hover {
  background: #000;
 a {
  color: #fff;
 }
 }
 a {
  display: block;
  width: 30px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  font-size: 12px;
  border-radius: 5px;
  text-decoration: none
 }
 }
 .active {
  background: #000;
 a {
  color: #fff;
 }
 }
 }
</style>

使用時(shí), 在父組件中引入, 代碼如下:

<template>
        <v-pagination :total="total" :current-page='current' @pagechange="pagechange"></v-pagination>
</template>
<script type="es6">
  import pagination from '@/components/common/pagination/pagination'
export default{
    data(){
 return {
        total: 150,     // 記錄總條數(shù)
        display: 10,   // 每頁(yè)顯示條數(shù)
        current: 1,   // 當(dāng)前的頁(yè)數(shù)
},
 methods: {
     pagechange:function(currentPage){
       console.log(currentPage);
       // ajax請(qǐng)求, 向后臺(tái)發(fā)送 currentPage, 來(lái)獲取對(duì)應(yīng)的數(shù)據(jù)
     }
   },
components: {
      'v-pagination': pagination,
    }
}
</script>

以上是“vue2.0如何實(shí)現(xiàn)分頁(yè)組件”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

當(dāng)前文章：vue2.0如何實(shí)現(xiàn)分頁(yè)組件
轉(zhuǎn)載來(lái)源：http://muchs.cn/article48/ihichp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供企業(yè)網(wǎng)站制作、網(wǎng)站內(nèi)鏈、品牌網(wǎng)站設(shè)計(jì)、網(wǎng)站營(yíng)銷(xiāo)、靜態(tài)網(wǎng)站、全網(wǎng)營(yíng)銷(xiāo)推廣

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)

小程序開(kāi)發(fā)