快捷導(dǎo)航

el-table渲染慢卡頓問題最優(yōu)解決方案

更新時(shí)間：2022年08月18日 08:31:33 作者：web前端-孤單小王子

本文主要介紹了el-table渲染慢卡頓問題最優(yōu)解決方案，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

1.如下圖，需要綁定兩個(gè)id，第一個(gè)id是需要浮動(dòng)的元素，加上scroll方法監(jiān)聽滑塊變化，第二個(gè)id是其子元素。

2.給eagleMapContainer設(shè)置overflow屬性和滑塊樣式，CSS參考如下

#eagleMapContainer{
   overflow-y: auto;
   margin-top: 10px;
   min-height: 150px;
   max-height: 600px;
 }
 #eagleMapContainer::-webkit-scrollbar {
    width: 6px; /*對(duì)垂直流動(dòng)條有效*/
    height: 6px;
  }
  #eagleMapContainer::-webkit-scrollbar-track{
    background-color:rgba(0,0,0,0.1);
  }
  #eagleMapContainer::-webkit-scrollbar-thumb{
    border-radius: 6px;
    background-color: rgba(0,0,0,0.2);
  }
  /*定義右下角匯合處的樣式*/
  #eagleMapContainer::-webkit-scrollbar-corner {
    background:rgba(0,0,0,0.2);
  }

3.在methods添加如下方法監(jiān)聽滑動(dòng)

  hanldeScroll(e) {
      // 獲取eagleMapContainer的真實(shí)高度
      const boxHeight = document.getElementById('eagleMapContainer').offsetHeight
      // 獲取table_list的真實(shí)高度（浮動(dòng)內(nèi)容的真實(shí)高度）
      const tableHeight = document.getElementById('table_list').offsetHeight
      // boxHeight和滑塊浮動(dòng)的高度相差小于50 && 不在加載中 && 不是最后一頁 
      if (tableHeight - (e.target.scrollTop + boxHeight) < 50 && !this.loading && this.listPage < (this.tableList.length / 300)) {
        // 第一次觸發(fā)時(shí)，記錄滑塊高度
        // data里scrollTop，listPage默認(rèn)為0
        if (!this.scrollTop) {
          this.scrollTop = e.target.scrollTop
        }
        // 觸發(fā)下拉加載更多
        this.queryMoreStat(true, tableHeight, boxHeight)
      } else if (e.target.scrollTop === 0 && !this.loading) {
        // 如果滑塊上拉到頂部，則向上加載300條
        this.queryMoreStat(false, tableHeight, boxHeight)
      }
    }

4.在methods添加如下方法，滑塊置頂或觸底（實(shí)現(xiàn)原理：始終只渲染當(dāng)前300條和前后的300條，一共900條數(shù)據(jù)）

    queryMoreStat(type, tableHeight, boxHeight) {
      this.loading = true
      // 觸底加載
      if (type) {
        this.listPage = this.listPage + 1
        const centerPage = this.listPage * 300
        const startPage = centerPage >= 300 ? centerPage - 300 : centerPage
        const endPage = centerPage + 600
        const newList = this.tableList.slice(startPage, endPage)
        if (this.listPage > 0) {
          const box = document.getElementById('eagleMapContainer')
          // 視圖跳到觸發(fā)的數(shù)據(jù)，補(bǔ)回50的高度差值
          box.scrollTop = this.scrollTop + 50
        }
        this.list = newList
      } else {
        // 置頂加載
        if (this.listPage > 0) {
          this.listPage = this.listPage - 1
          const centerPage = this.listPage * 300
          const startPage = centerPage >= 300 ? centerPage - 300 : centerPage
          const endPage = centerPage + 600
          const newList = this.tableList.slice(startPage, endPage)
          if (this.listPage > 0) {
            const box = document.getElementById('eagleMapContainer')
            box.scrollTop = tableHeight - this.scrollTop - boxHeight
          }
          this.list = newList
        } else {
          this.list = this.tableList.slice(0, 300)
        }
      }
      this.$nextTick(() => {
        this.loading = false
      })
    }

到此這篇關(guān)于el-table渲染慢卡頓問題最優(yōu)解決方案的文章就介紹到這了,更多相關(guān)el-table渲染慢卡頓內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: