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

关键步骤：

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);

}

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