iview 是一個(gè)支持中大型項(xiàng)目的后臺(tái)管理系統(tǒng)ui組件庫(kù)，相對(duì)于一個(gè)后臺(tái)管理系統(tǒng)的表格來(lái)說(shuō)分頁(yè)十分常見的

iview是一個(gè)基于vue的ui組件庫(kù)，其中的iview-admin是一個(gè)已經(jīng)為我們搭好的后天系統(tǒng)框架，十分方便。

下面我們就簡(jiǎn)單封裝一個(gè)分頁(yè)插件

首先引用iview的分頁(yè)

<Page :total="total" :page-size="pageSize" :page-size-opts="[10]" show-sizer show-total @on-change="changePage" @on-page-size-change="changeNum"></Page>
其中total是總條數(shù)，page-size是每頁(yè)條數(shù) page-size-opts是頁(yè)數(shù) changeNum方法是每頁(yè)條數(shù)變化 changePage方法把封裝好的每頁(yè)條數(shù)和頁(yè)數(shù)傳到調(diào)用此組件的父頁(yè)面 props: ['total', 'changePageCallback'], //changePageCallback是回調(diào)的方法 changePage (page) {
this.changePageCallback(page, this.pageSize);
// 這邊調(diào)用 回調(diào)函數(shù)將 頁(yè)碼返回上一級(jí)調(diào)用的頁(yè)面
}, changeNum (num) {
this.pageSize = num;
}

然后在父頁(yè)面簡(jiǎn)單調(diào)用就可以了 <page-sizes :total="total" :changePageCallback="changePageCallback"></page-sizes>//父頁(yè)面引用 // 分頁(yè)回調(diào)
changePageCallback (page, pageSize) {
//此時(shí)的page為傳過(guò)來(lái)的頁(yè)數(shù)，pageSize為每頁(yè)條數(shù)
},

轉(zhuǎn)載于:https://www.cnblogs.com/wenchao666/p/10762474.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。