前端會遇到許多數(shù)據(jù)處理的情況,包括后端給的數(shù)據(jù)不符合預(yù)期,或者缺少某些重要數(shù)據(jù)的時候,如果可行前端也可以通過計(jì)算和處理數(shù)據(jù)彌補(bǔ)這些不足,尤其是后端不能靈活的處理所需數(shù)據(jù)的時候。
之前遇到了一個問題,有一個頁面的數(shù)據(jù)非常的多,大概1000條左右,而后端沒有傳遞條碼和頁數(shù)返回相應(yīng)的內(nèi)容的時候,前端同時展示出來會導(dǎo)致頁面卡頓,這里我們就可以通過計(jì)算,實(shí)現(xiàn)前端自行分頁。
這里我們使用element的分頁,屬性如下page-size(每頁顯示數(shù)),current-page(當(dāng)前頁數(shù)),total(總頁數(shù)),我們使用的方法為slice(),w3c對他的解釋如下:簡單的說就是截取數(shù)組。
實(shí)現(xiàn)思路為:當(dāng)獲取到巨量數(shù)據(jù)的時候,不要展示,而是通過某個字段存儲起來,展示的僅僅為:page-size(每頁顯示數(shù))* current-page(當(dāng)前頁數(shù)),每當(dāng)需要進(jìn)行分頁的時候,重新計(jì)算并通過截取數(shù)組來展示新的類目。需要注意,我們的數(shù)據(jù)是從0-10開始的,但是頁數(shù)是從1開始的,我們需要給這個頁數(shù)-1,否則初始就是從10開始了。
說到slice,其實(shí)還有另一種截取方法splice,不過這個方法主要用于刪除元素,刪除除了需要展示頁面數(shù)據(jù)的其他數(shù)據(jù),不過相比slice,這個方法有點(diǎn)本末倒置了。
了解更多vue知識點(diǎn)擊這里。