- 問題
在iview page分頁的時候,修改每頁條數時,會發出兩次請求。
iview 版本是4.0.0
- 原因
iview 的分頁在調用@on-page-size-change之前會調用@on-Change。默認會先調用@on-Change回到第一頁,再調用@on-page-size-change改變分頁顯示數量
此時就會出現回到第一頁,在返回調用@on-page-size-change時的頁數,造成當前頁沒有數據。
舉個例子,就是點擊最后一頁然后修改每頁條數就是@on-page-size-change,但這是會先調用@on-Change回到第一頁獲取數據,然后在調用@on-page-size-change回到最后一頁獲取數據,就會出現錯誤,因為每頁條數改變后就沒有那么多頁了,出現分頁樣式錯誤和沒有數據。
- 解決
在@on-page-size-change事件中,判斷pageNum === 1時在調用this.getList();獲取數據,這時就只調用一次。
// 修改頁數changePageNum(no){this.pageOptions.pageNo = no;this.getList();},// 修改每頁大小changePageSize(size){this.pageOptions.pageSize = size;this.pageOptions.pageNum === 1 && this.getList();},
結果就是改變每頁條數之后回到第一頁并根據修改后的每頁的條數獲取數據。
這是本人在使用iview的分頁的時候遇到的問題。這里講的可能不是很清楚,請諒解。可以到github上看別的講解傳送門

喜歡的朋友記得點贊、收藏、關注哦!!!