100行代碼實現(xiàn)一個vue分頁組功能

更新時間：2018年11月06日 14:36:59 作者：伊澤瑞爾

今天用vue來實現(xiàn)一個分頁組件，總體來說，vue實現(xiàn)比較簡單，樣式部分模仿了elementUI。接下來本文通過實例代碼給大家介紹100行代碼實現(xiàn)一個vue分頁組功能，感興趣的朋友跟隨小編一起看看吧

今天用vue來實現(xiàn)一個分頁組件，總體來說，vue實現(xiàn)比較簡單，樣式部分模仿了elementUI。所有代碼的源碼可以再github上下載的到：下載地址先來看一下實現(xiàn)效果：

整體思路

我們先看一下使用到的文件的目錄：

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

pageComponent.vue實現(xiàn)

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

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

根據(jù)用戶入?yún)?，我們可以使用計算屬性來計算一個總頁數(shù)的變量：

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

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

總頁數(shù)小于8，只需要直接遍歷到8就行了。
總頁數(shù)大于8，但當前頁小于4的。
總頁數(shù)大于8，當前頁靠后的。
總頁數(shù)大于8，當前頁在中間的。

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

<!--上一頁-->
   <button @click="prePage" :disabled="currentPage === 1">上一頁</button>
   <!--總頁數(shù)小于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>

可以看到頁面上需要實現(xiàn)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 的大致實現(xiàn)了，每次頁面改變，都會觸發(fā)一個 changeCurrentPage 方法的回調(diào)，用來通知當前使用組件的頁面當前頁已經(jīng)改變。

pageComponentsTest.vue的實現(xiàn)

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

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

配合入?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
   }
  }
 }

總結(jié)

可以看到使用vue實現(xiàn)分頁組件整體來說是很容易了，比使用jQuery方便很多，使用vm模式開發(fā)前端的最明顯的一個好處是，能是數(shù)據(jù)mode部分與view頁面部分保持同步，而開發(fā)者不用考慮這個過程，所以整體來說簡單了很多。

以上所述是小編給大家介紹的100行代碼實現(xiàn)一個vue分頁組功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

Vue3中的ref和reactive響應式原理解析
這篇文章主要介紹了Vue3中的ref和reactive響應式,本節(jié)主要介紹了響應式變量和對象，以及變量和對象在響應式和非響應式之間的轉(zhuǎn)換，需要的朋友可以參考下
2022-08-08
VUE多層路由嵌套實現(xiàn)代碼
這篇文章主要為大家詳細介紹了VUE多層路由嵌套的實現(xiàn)代碼，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-05-05
詳解vue 命名視圖
這篇文章主要介紹了vue 命名視圖的相關知識，本文給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下
2019-08-08
Vue自定義Hook實現(xiàn)簡化本地存儲
這篇文章主要為大家詳細介紹了如何通過使用 Vue 3 的 Composition API 創(chuàng)建一個強大而靈活的自定義 Hook,簡化了在 localStorage 或 sessionStorage 中管理數(shù)據(jù)的流程,需要的可以參考下
2023-12-12
vue項目實現(xiàn)添加圖片裁剪組件
這篇文章主要為大家詳細介紹了vue項目實現(xiàn)添加圖片裁剪組件，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-03-03
關于vue面試題匯總
本文給大家收藏整理了關于vue面試題匯總的一些知識,需要的朋友可以參考下
2018-03-03
Vue Steps步驟條渲染異常問題
這篇文章主要介紹了Vue Steps步驟條渲染異常問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-04-04
詳解vite+ts快速搭建vue3項目以及介紹相關特性
這篇文章主要介紹了vite+ts快速搭建vue3項目以及介紹相關特性，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2021-02-02
vue項目開發(fā)中setTimeout等定時器的管理問題
這篇文章主要介紹了vue項目開發(fā)中setTimeout等定時器的管理問題,需要的朋友可以參考下
2018-09-09
vite如何構(gòu)建vue3項目
本文介紹了如何使用Vite快速搭建Vue項目,強調(diào)Vite對Node.js版本有最低要求（>=12.0.0）,提供了環(huán)境準備、安裝步驟和啟動指南,旨在幫助開發(fā)者高效啟動Vue項目
2024-10-10