Element UI 無論是 Vue2 或是 Vue3 的版本，其分頁條 ( Pagination ) 和 Table 表格本身是分開處理的。因此在每頁項目數 ( limit )、當前顯示頁數 ( currentPage ) 搭配搜尋條件和排序條件時，會遇上 limit 和 currentPage 有時間差的狀況。這邊筆記下處理方法。
思路
1. 藉由對 <el-pagination> 的再次封裝而成，建議需傳入 total, limit 和 page 三個參數。
2. 當 limit 的值改變時，會觸發 limit 和 page 的值進行變動 ( 因為 page 的值有機會因為 limit 改變而超過 )。當父層接收到兩次 emit 出的值時，要藉由 total 來進行判斷
3. 承接第二點，因為在排序和搜尋的字串條件不變的情況下，僅改變 limit 大小並不會造成 total 變動。所以可以在打 api 取資料前利用條件進行判斷，排除掉不合理的請求。
程式碼
1. 若 total 不是 0 且 目標頁數 > Math.ceil(total / limit)，這會是一個不必要送出的請求
按讚加入粉絲團
