当前位置: 首页 > 工具软件 > Pagination2 > 使用案例 >

vue-pagination-2 使用

仲孙逸明
2023-12-01

接手的项目用的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

 类似资料: