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