Vue組件BootPage實現(xiàn)簡單的分頁功能

更新時間：2021年08月31日 14:36:53 作者：一個蘿卜一個坑

這篇文章主要為大家詳細(xì)介紹了Vue小組件BootPage實現(xiàn)簡單的分頁功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

有一段時間沒更新文章了，主要是因為自己一直在忙著學(xué)習(xí)新的東西而忘記分享了，實在慚愧。

這不，大半夜發(fā)文更一篇文章，分享一個自己編寫的一個Vue的小組件，名叫BootPage。

不了解Vue.js的童鞋可以移步我的上一篇文章《淺談Vue.js》了解一下。

BootPage組件簡介

其實也不是啥高大上的組件了，相反確實一個簡單的表格分頁組件而已，主要是自己最近項目中需要一個表格分頁組件，而Vue官方組件庫里分頁組件都功能太強(qiáng)大或者沒有適合我的，所以就自己寫了一個湊合著用，或許有人和我一樣需要這樣一個簡單的分頁組件來實現(xiàn)簡單的分頁功能，我便在這里分享一下，大家自覺填坑咯。

如需高大上的組件，可以移步Vue官方組件庫：https://github.com/vuejs/awesome-vue#libraries--plugins

BootPage是一款支持靜態(tài)數(shù)據(jù)和服務(wù)器數(shù)據(jù)的表格分頁組件，支持調(diào)整每頁顯示行數(shù)和頁碼顯示個數(shù)，樣式基于bootstrap，就像這樣：

在線演示：https://luozhihao.github.io/B...

使用方法

在.vue的組件文件中我們這樣寫template，即html代碼：

<table class="table table-hover table-bordered">
 <thead>
  <tr>
  <th width="10%">id</th>
  <th width="30%">name</th>
  <th width="40%">content</th>
  <th width="20%">remark</th>
  </tr>
 </thead>
 <tbody>
  <tr v-for="data in tableList">
  <td v-text="data.num"></td>
  <td v-text="data.author"></td>
  <td v-text="data.contents"></td>
  <td v-text="data.remark"></td>
  </tr>
 </tbody>
 <tfoot>
  <tr>
  <td colspan="4">
   <div class="pull-left">
   <button class="btn btn-default" v-on:click="refresh">刷新</button>
   </div>
   <div class="pull-right">
   <boot-page :async="false" :data="lists" :lens="lenArr" :page-len="pageLen" :param="param"></boot-page>
   </div>
  </td>
  </tr>
 </tfoot>
</table>

<boot-page>標(biāo)簽中async指是否從服務(wù)器端獲取數(shù)據(jù)，false為否；data為靜態(tài)的表格數(shù)據(jù)數(shù)組；lens為每頁顯示行數(shù)的數(shù)組；page-len為可顯示的頁碼數(shù)；

使用靜態(tài)數(shù)據(jù)的javascript代碼即script標(biāo)簽內(nèi)的內(nèi)容如下：

<script>
 import bootPage from './components/BootPage.vue'

 export default {
  data () {
  return {
   lenArr: [10, 50, 100], // 每頁顯示長度設(shè)置
   pageLen: 5, // 可顯示的分頁數(shù)
   lists: [
   {num: 1, author: 'luozh', contents: 'BootPage是一款支持靜態(tài)數(shù)據(jù)和服務(wù)器數(shù)據(jù)的表格分頁組件', remark: 'dsds'},
   {num: 2, author: 'luozh', contents: '支持調(diào)整每頁顯示行數(shù)和頁碼顯示個數(shù)，樣式基于bootstrap', remark: 'dsds'},
   {num: 3, author: 'luozh', contents: '<boot-page>標(biāo)簽中async指是否從服務(wù)器端獲取數(shù)據(jù)，false為否', remark: 'dsds'},
   {num: 4, author: 'luozh', contents: 'data為靜態(tài)的表格數(shù)據(jù)數(shù)組；', remark: 'dsds'},
   {num: 5, author: 'luozh', contents: 'lens為每頁顯示行數(shù)的數(shù)組', remark: 'dsds'},
   {num: 6, author: 'luozh', contents: 'page-len為可顯示的頁碼數(shù)', remark: 'dsds'},
   {num: 7, author: 'luozh', contents: '服務(wù)器回傳參數(shù)為{data:[], page_num: 6}, 其中data為表格數(shù)據(jù)，page_num為總頁數(shù)', remark: 'dsds'},
   {num: 8, author: 'luozh', contents: '可以調(diào)用this.$refs.page.refresh()刷新表格數(shù)據(jù)', remark: 'dsds'}
   ], // 表格原始數(shù)據(jù)，使用服務(wù)器數(shù)據(jù)時無需使用
   tableList: [] // 分頁組件傳回的分頁后數(shù)據(jù)
  }
  },
  components: {
  bootPage
  },
  events: {

  // 分頁組件傳回的表格數(shù)據(jù)
  'data' (data) {
   this.tableList = data
  }
  }
 }
</script>

一般我們很少使用靜態(tài)的表格數(shù)據(jù)，大多數(shù)應(yīng)用的數(shù)據(jù)都是從服務(wù)器端獲取的，所以這里提供了獲取服務(wù)器分頁數(shù)據(jù)的方法：

使用服務(wù)器數(shù)據(jù)的組件HTML如下：

<boot-page v-ref:page :async="true" :lens="lenArr" :url="url" :page-len="pageLen" :param="param"></boot-page>
其中url為服務(wù)器的請求地址；param為需要向服務(wù)器發(fā)送的參數(shù)對象；

使用服務(wù)器數(shù)據(jù)javascript的代碼如下：

<script>
 import bootPage from './components/BootPage.vue'

 export default {
  data () {
  return {
   lenArr: [10, 50, 100], // 每頁顯示長度設(shè)置
   pageLen: 5, // 可顯示的分頁數(shù)
   url: '/bootpage/', // 請求路徑
   param: {}, // 向服務(wù)器傳遞參數(shù)
   tableList: [] // 分頁組件傳回的分頁后數(shù)據(jù)
  }
  },
  methods: {
  refresh () {
   this.$refs.page.refresh() // 這里提供了一個表格刷新功能
  }
  },
  components: {
  bootPage
  },
  events: {

  // 分頁組件傳回的表格數(shù)據(jù)（這里即為服務(wù)器傳回的數(shù)據(jù)）
  'data' (data) {
   this.tableList = data
  },

  // 刷新數(shù)據(jù)
  'refresh' () {
   this.refresh()
  }
  }
 }
</script>

注：服務(wù)器除了傳給組件表格的數(shù)組內(nèi)容，還需一個總頁數(shù)的鍵名，名為page_num

組件自帶向服務(wù)器傳遞的參數(shù)為:

{
active: 1, // 當(dāng)前頁碼
length: 5 // 每頁顯示個數(shù)
}

服務(wù)器回傳的參數(shù)需為:

{
    data: [], // 表格數(shù)據(jù)
    page_num: 5 // 總頁數(shù)
}

組件源碼

至于分頁的實現(xiàn)源碼這里的就不展示了，所有源碼我都上傳到了我的github，地址為：https://github.com/luozhihao/BootPage

這里事先提個醒：因為這個組件是我用幾個小時趕出來的，所以對于Vue組件的編寫格式和規(guī)范肯定是考慮不周的，沒有完全獨立出來，所以自覺填坑咯，這里只作分享。

當(dāng)然你也可以隨意的修改組件的代碼來適合自己項目的使用，畢竟實現(xiàn)大而全的分頁組件還是比較復(fù)雜的。

本文已被整理到了《Vue.js前端組件學(xué)習(xí)教程》，歡迎大家學(xué)習(xí)閱讀。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: