自定義封裝分頁器組件之前需要知道的數據: 1.當前的頁碼 2.總共多少條數據 3.每頁展示多少條數據 4.連續頁碼數(5|7) 5.總頁數 計算連續頁碼數的起始值和結束值 //通過計算屬性來計算出來 computed:{ startNumAndEndNum(){ //首先先結構出我們需要的值(當前頁 ...
自定義封裝分頁器組件之前需要知道的數據:
1.當前的頁碼
2.總共多少條數據
3.每頁展示多少條數據
4.連續頁碼數(5|7)
5.總頁數
計算連續頁碼數的起始值和結束值
//通過計算屬性來計算出來
computed:{
startNumAndEndNum(){
//首先先結構出我們需要的值(當前頁碼值,總頁數,連續頁碼數),這個值可以讓父組件通過props進行傳遞
let {pageNo,totalPage,continues} = this
//給起始值和結束值賦初始變數
let start = 0,end = 0;
//判斷當前總頁數是否小於連續頁碼數
if(totalPage<continues){
start=1;end=totalPage;
} else{
//如果總頁數大於連續頁碼數
start = pageNo - parseInt(continues/2);
end = pageNo + parseInt(continues/2);
//還要判斷起始值是否小於1
if(start<1){
start = 1;
end = continues;
}
//判斷結束值是否大於總頁數
if(end>totalPage){
end = totalPage;
start = totalPage - continues +1
}
}
return {start,end}
}
}
剩下我們就可以遍歷結束值,讓遍歷出來的值大於等於起始值顯示,否則隱藏,這樣連續頁碼數的值就有了,再根據其他接收到的值進行渲染頁面就可以了
發送請求切換頁面?
通過綁定自定義事件,通過傳入當前的頁碼數發送請求,點擊上一頁,傳入當前的頁碼數-1,點擊下一頁,傳入當前的頁碼數+1,點擊最後一頁直接傳入總頁數