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

}

本例對特別請求特別多數據時，該方法大有用處。僅作參考。如有疑問，請聯繫。。。