vue前端分頁功能
阿新 • • 發佈:2020-09-19
前幾天專案後端說資料庫存取效能不佳,一個表格五條資料25秒才請求得到
突發奇想後端給前端全部的表格ID,讓前端把表格資料一條一條,非同步請求後端,後端再一條一條查詢返回,再由前端構建表格陣列,速度是快了不少,人差點送走
前端分頁程式碼
表格每頁固定最多五條資料
// 表格總條數 let total = this.station.length // 最後一頁條數 let rest = 0 if (total <= 5) { // 頁數 this.page = 1 } else { // 頁數 this.page = parseInt(total / 5) rest = total % 5 if (rest > 0) { this.page += 1 } }
點選分頁
value.page
是點選的第幾頁,如有需要加上初始化value.page=1
第一頁
let allPromise = [] let list = [] for (let i = ((value.page - 1) * 5); i < (rest === 0 ? ((value.page - 1) * 5 + 5) : ((value.page - 1) * 5 + rest)); i++) { param.push({請求引數}) } param.map((value) => { // 構造非同步請求陣列 allPromise.push(API.getValue(value)) }) Promise.all(allPromise).then((res) => { console.log(res) // 存放返回結果 res.map((value) => { list.push(value.data[0]) }) })
請求完了之後list
陣列就可以直接插在表格裡了
優化相應速度這種事情,還是讓後端來吧,前端這種蠢死的行為少做的好