vue如何實現一個分頁組功能

這篇“vue如何實現一個分頁組功能”文章的知識點大部分人都不太理解，所以小編給大家總結了以下內容，內容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“vue如何實現一個分頁組功能”文章吧。

文件的目錄：

我們在 pageComponentsTest.vue 頁面引入了 pageComponent.vue 分頁組件。整體思路是通過 props
來達到組件的靈活通用的效果，整體語法是使用vue的VM語法。

pageComponent.vue實現

首先實現一個分頁，需要知道數據總條數，一個頁面顯示的數據條數和當前顯示第幾頁的數據。那么我們在 pageComponent.vue 里面的 props 就有了。看下面的代碼：

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

根據用戶入參，我們可以使用計算屬性來計算一個總頁數的變量：

computed: {
   //計算總頁數，如果傳了pageTotal,直接取pageTotal的值，如果傳了total，那么根據pageSize去計算
   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
     }
    }
   }
  }

有了總頁數，和當前頁，就需要各種判斷來實現我們的html部分了，這里分4中情況

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

2. 總頁數大于8，但當前頁小于4的。

3. 總頁數大于8，當前頁靠后的。

4. 總頁數大于8，當前頁在中間的。

下面看具體的實現：

<!--上一頁-->
   <button @click="prePage" :disabled="currentPage === 1">上一頁</button>
   <!--總頁數小于8的-->
   <template v-if="pageTotal <= showPageNo">
    <button v-for="i in pageTotal" @click="changeCurrentPage(i)" :class="{active:i === currentPage}" :key="i">{{i}}</button>
   </template>
   <template v-else-if="currentPage < 4">
    <button v-for="i in 6" @click="changeCurrentPage(i)" :class="{active:i === currentPage}" :key="i">{{i}}</button>
    <button :disabled="true">···</button>
    <button>{{pageTotal}}</button>
   </template>
   <template v-else-if="currentPage > pageTotal - 4">
    <button>1</button>
    <button :disabled="true">···</button>
    <button v-for="i in 6" @click="changeCurrentPage(i + (pageTotal - 6))" :class="{active:(i + (pageTotal - 6)) === currentPage}" :key="i">{{i + (pageTotal - 6)}}</button>
   </template>
   <template v-else>
    <button>1</button>
    <button :disabled="true">···</button>
    <button @click="changeCurrentPage(currentPage - 2)">{{currentPage - 2}}</button>
    <button @click="changeCurrentPage(currentPage - 1)">{{currentPage - 1}}</button>
    <button class="active">{{currentPage}}</button>
    <button @click="changeCurrentPage(currentPage + 1)">{{currentPage + 1}}</button>
    <button @click="changeCurrentPage(currentPage + 2)">{{currentPage + 2}}</button>
    <button :disabled="true">···</button>
    <button @click="changeCurrentPage(pageTotal)">{{pageTotal}}</button>
   </template>
   <!--下一頁-->
   <button @click="nextPage" :disabled="currentPage === pageTotal">下一頁</button>

可以看到頁面上需要實現3個方法，分別是上下頁，和點擊頁面的方法。

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 的大致實現了，每次頁面改變，都會觸發一個 changeCurrentPage 方法的回調，用來通知當前使用組件的頁面當前頁已經改變。

pageComponentsTest.vue的實現

引用頁面就比較簡單了，只要傳入組件需要的對應的參數，就能顯示我們的組件了。 引用部分：

<template>
 <div class="pageComponentsTest">
  <page-component :page-config="pageConfigTotal" @changeCurrentPage="changePage"></page-component>
  <page-component :page-config="pageConfigPageTotal"></page-component>
 </div>
</template>

配合入參部分：

{
  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
   }
  }
 }

為什么要使用Vue

Vue是一款友好的、多用途且高性能的JavaScript框架，使用vue可以創建可維護性和可測試性更強的代碼庫，Vue允許可以將一個網頁分割成可復用的組件，每個組件都包含屬于自己的HTML、CSS、JavaScript，以用來渲染網頁中相應的地方，所以越來越多的前端開發者使用vue。

以上就是關于“vue如何實現一個分頁組功能”這篇文章的內容，相信大家都有了一定的了解，希望小編分享的內容對大家有幫助，若想了解更多相關的知識內容，請關注億速云行業資訊頻道。