当前位置: 萬仟网 > IT编程>开发>JavaScript > vue分页组件二次封装---每页请求特定数据

vue分页组件二次封装---每页请求特定数据

16  人参与 | 时间:2019-03-15 | 我要评论

 关键步骤:

1.传两个参数:pagecount (每页条数)、pageindex (页码数);

2.bind方法的调用

<!-- 这部分是分页 --> 
<div class="yema">
<el-pagination 
background
@size-change="handlesizechange" 
@current-change="handlecurrentchange" 
:page-sizes="[10,20,30]"
:page-size="pagecount" 
layout="total,jumper,prev, pager, next,sizes"
:total="totalpage" >
</el-pagination>
</div>
<!-- 这部分是分页 end-->

 

js代码:

totalpage: " ",
currentpage:1, // 默认显示第一条
pagecount:5,//每页显示条数

 
//分页 初始页currentpage、初始每页数据数pagesize

// 每页条数 console.log(`每页 ${val} 条`);
handlesizechange:function(pagecount){

var that = this;

that.form.pagecount = pagecount; //每页显示条数

that.$options.methods.qrybtn.bind(this)();

console.log("pagecount==>",pagecount );


},

// 当前 页码数 console.log(`当前页: ${val}`);
handlecurrentchange:function(pageindex){
var that = this;

// 赋值:后面的pageindex 赋值给 that.form.pageindex
that.form.pageindex = pageindex;//页码

// 方法调用方法
that.$options.methods.qrybtn.bind(this)();

console.log("pageindex==>", this.form.pageindex);

}

本例对特别请求特别多数据时,该方法大有用处。仅作参考。如有疑问,请联系。。。

如对本文有疑问,请在下面进行留言讨论,广大热心网友会与你互动!! 点击进行留言回复

相关文章:

◎已有 0 人评论

Copyright © 2019  萬仟网 保留所有权利. 粤ICP备17035492号-1
站长QQ:2386932994 | 联系邮箱:2386932994@qq.com