1. 程式人生 > 實用技巧 >vue前端分頁功能

vue前端分頁功能

前幾天專案後端說資料庫存取效能不佳,一個表格五條資料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陣列就可以直接插在表格裡了

優化相應速度這種事情,還是讓後端來吧,前端這種蠢死的行為少做的好