vue-pagination-2 使用

接手的项目用的vue+bootstrap，但是所有内容都没有做分页也是无语得一批，一个后台管理系统，全都是表格数据，为啥没有分页不是很懂，不吐槽了。

先安装

npm install vue-pagination-2

在main.js 注入全局组件

import Pagination from 'vue-pagination-2'
Vue.component('pagination', Pagination)

然后就可以在页面上写了，在data里写上必须的一些属性

data(){
	return{		
		page:1,	//默认第一页
		perPage:20,//每页多少条
		pageNo:1,//当前页
		records: 0,//总数
	}
},
methods:{
	loadoption(){
		this.pageNo = this.page;//让当前页等于，回调函数传回来的page的值，然后再去获取数据，在此更新页码
		//详细：paginate 可以调用自定义事件。可以在组件上收听并运行您的回调。他会回传一个参数page，为当前页码。可以利用这个参数来进行列表内容的更新。
		var params ={page:this.pageNo,rows:this.perPage};
		this.post('url',params,res=>{
			if(res.code == '200'){
				//在此更新数据
				that.records = result.data.total;
			}else{
						
			}
		});
	}
}

页面上调用如下：

<pagination :records="records" :per-page= "perPage" @paginate="loadoption" v-model="page"></pagination>

打完收工！

参考：
https://www.jianshu.com/p/ba7ba5523710