基於iview 封裝一個vue 表格分頁組件

iview 是一個支持中大型項目的后台管理系統ui組件庫，相對於一個后台管理系統的表格來說分頁十分常見的

iview是一個基於vue的ui組件庫，其中的iview-admin是一個已經為我們搭好的后天系統框架，十分方便。

下面我們就簡單封裝一個分頁插件

首先引用iview的分頁

<Page :total="total" :page-size="pageSize" :page-size-opts="[10]" show-sizer show-total @on-change="changePage" @on-page-size-change="changeNum"></Page>
其中total是總條數，page-size是每頁條數  page-size-opts是頁數   changeNum方法是每頁條數變化     changePage方法把封裝好的每頁條數和頁數傳到調用此組件的父頁面

props: ['total', 'changePageCallback'], //changePageCallback是回調的方法

changePage (page) {
  this.changePageCallback(page, this.pageSize);
  // 這邊調用 回調函數將 頁碼返回上一級調用的頁面
},

changeNum (num) {
  this.pageSize = num;
}

然后在父頁面簡單調用就可以了

<page-sizes :total="total" :changePageCallback="changePageCallback"></page-sizes>//父頁面引用

// 分頁回調
changePageCallback (page, pageSize) {
   //此時的page為傳過來的頁數，pageSize為每頁條數
},