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為每頁條數
},

轉載于:https://www.cnblogs.com/wenchao666/p/10762474.html

總結

以上是生活随笔為你收集整理的基于iview 封装一个vue 表格分页组件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。