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为每页条数
},