本篇文章為大家展示了使用vue怎么實(shí)現(xiàn)一個(gè)分頁組功能，內(nèi)容簡(jiǎn)明扼要并且容易理解，絕對(duì)能使你眼前一亮，通過這篇文章的詳細(xì)介紹希望你能有所收獲。

成都創(chuàng)新互聯(lián)公司主營(yíng)浦城網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營(yíng)網(wǎng)站建設(shè)方案,app軟件開發(fā)公司,浦城h5重慶小程序開發(fā)公司搭建,浦城網(wǎng)站營(yíng)銷推廣歡迎浦城等地區(qū)企業(yè)咨詢

文件的目錄：

我們?cè)?code> pageComponentsTest.vue 頁面引入了 pageComponent.vue 分頁組件。整體思路是通過 props
來達(dá)到組件的靈活通用的效果，整體語法是使用vue的VM語法。

pageComponent.vue實(shí)現(xiàn)

首先實(shí)現(xiàn)一個(gè)分頁，需要知道數(shù)據(jù)總條數(shù)，一個(gè)頁面顯示的數(shù)據(jù)條數(shù)和當(dāng)前顯示第幾頁的數(shù)據(jù)。那么我們?cè)?pageComponent.vue 里面的 props 就有了?？聪旅娴拇a：

props: {
   // 分頁配置
   pageConfig: {
    type: Object, require: true, default() {
     return {
      pageSize: 10,   //一頁的數(shù)據(jù)條數(shù)
      pageNo: 0,    //當(dāng)前頁的索引
      total: 0,     //總的數(shù)據(jù)條數(shù)
      pageTotal: 0   //總的頁數(shù)
     }
    }
   }

根據(jù)用戶入?yún)ⅲ覀兛梢允褂糜?jì)算屬性來計(jì)算一個(gè)總頁數(shù)的變量：

computed: {
   //計(jì)算總頁數(shù)，如果傳了pageTotal,直接取pageTotal的值，如果傳了total，那么根據(jù)pageSize去計(jì)算
   pageTotal(){
    const config = this.pageConfig
    if(config.pageTotal){
     return config.pageTotal
    }else {
     if(config.pageSize && config.total){
      return Math.ceil(config.total/config.pageSize)
     }else {
      return 0
     }
    }
   }
  }

有了總頁數(shù)，和當(dāng)前頁，就需要各種判斷來實(shí)現(xiàn)我們的html部分了，這里分4中情況

1. 總頁數(shù)小于8，只需要直接遍歷到8就行了。

2. 總頁數(shù)大于8，但當(dāng)前頁小于4的。

3. 總頁數(shù)大于8，當(dāng)前頁靠后的。

4. 總頁數(shù)大于8，當(dāng)前頁在中間的。

下面看具體的實(shí)現(xiàn)：

   上一頁
   
   
    {{i}}
   
   
    {{i}}
    ···
    {{pageTotal}}
   
    pageTotal - 4">
    1
    ···
    {{i + (pageTotal - 6)}}
   
   
    1
    ···
    {{currentPage - 2}}
    {{currentPage - 1}}
    {{currentPage}}
    {{currentPage + 1}}
    {{currentPage + 2}}
    ···
    {{pageTotal}}
   
   
   下一頁

可以看到頁面上需要實(shí)現(xiàn)3個(gè)方法，分別是上下頁，和點(diǎn)擊頁面的方法。

methods: {
   prePage(){
    this.currentPage -= 1
    this.$emit('changeCurrentPage',this.currentPage)
   },
   nextPage(){
    this.currentPage += 1
    this.$emit('changeCurrentPage',this.currentPage)
   },
   changeCurrentPage(i){
    this.currentPage = i
    this.$emit('changeCurrentPage',this.currentPage)
   }
  }

以上就是 pageComponent.vue 的大致實(shí)現(xiàn)了，每次頁面改變，都會(huì)觸發(fā)一個(gè) changeCurrentPage 方法的回調(diào)，用來通知當(dāng)前使用組件的頁面當(dāng)前頁已經(jīng)改變。

pageComponentsTest.vue的實(shí)現(xiàn)

引用頁面就比較簡(jiǎn)單了，只要傳入組件需要的對(duì)應(yīng)的參數(shù)，就能顯示我們的組件了。 引用部分：

配合入?yún)⒉糠郑?/p>

{
  name: "pageComponentsTest",
  data() {
   return {
    pageConfigTotal:{total:21,pageSize:10,pageNo:1},
    pageConfigPageTotal:{total:21,pageSize:10,pageNo:1,pageTotal:50}
   }
  },
  components:{'page-component':pageComponent},
  methods: {
   changePage(page){
    this.pageConfigTotal.pageNo = page
   }
  }
 }

上述內(nèi)容就是使用vue怎么實(shí)現(xiàn)一個(gè)分頁組功能，你們學(xué)到知識(shí)或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識(shí)儲(chǔ)備，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

網(wǎng)頁題目：使用vue怎么實(shí)現(xiàn)一個(gè)分頁組功能-創(chuàng)新互聯(lián)
鏈接分享：http://weahome.cn/article/phhjo.html