快捷導(dǎo)航

antdv的table因數(shù)據(jù)量過大導(dǎo)致的卡頓問題及解決

更新時間：2023年11月17日 08:56:37 作者：苑某某

這篇文章主要介紹了antdv的table因數(shù)據(jù)量過大導(dǎo)致的卡頓問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

遇到的問題

antdv的table表格使用時因數(shù)據(jù)量過大，造成標(biāo)簽頁切換卡頓的問題

解決辦法

綁定滾動事件，頁面只顯示在可視區(qū)域內(nèi)的數(shù)據(jù)，沒在可視區(qū)域內(nèi)的數(shù)據(jù)不予展示，dom元素的scrollHeight和offsetHeight和scrollTop三個值的比較，判斷是否滑到底部了或者頂部了，滑到底部或頂部之后，用scrollTo函數(shù)改變滾動條的位置，使其可以再次觸發(fā)滑到頂部或底部，用計數(shù)count，下滾一下count++,上滾一下count–，用count來從原數(shù)據(jù)里slice哪20條數(shù)據(jù)展示

上代碼

mounted () {
document.querySelector('#test table').addEventListener('scroll', this.handleScroll) // 給dom元素綁定scroll事件，可以在mounted的時候就給他綁定
},
methods: {
    handleScroll (e) {
      this.scrollTop = e.target.scrollTop
      this.offsetHeight = e.target.offsetHeight
      this.scrollHeight = e.target.scrollHeight
      // 不足20條數(shù)據(jù)，就都展示了就好
      if (this.data.length < 20) {
        this.dataScroll= this.data
        // 滑到頂部也是給個提示
        if (this.scrollTop === 0) {
          this.$message.warn('您已經(jīng)滑到頂部了')
        }
        // 滑到底部還是給個提示
        if ((this.scrollTop + this.offsetHeight) >= this.scrollHeight) {
          this.$message.warn('沒有更多數(shù)據(jù)了')
        }
        return
      }
       // 滑到頂部scrollTop為0
      if (this.scrollTop === 0) {
        this.selectedRowKeys = []
        // 計數(shù)變?yōu)?，即如果是1就代表滑到頂部了，取0-20條數(shù)的告警在可視區(qū)域
        let scrollCountTop = this.scrollCount
        if (this.scrollCount <= 0) {
          this.scrollCount = 1
        }
        if (this.scrollCount === 1) {
          this.datascroll= this.data.slice(0, this.numberMaxOverView)  // this.numberMaxOverView是要在這一頁展示的數(shù)據(jù)條數(shù)
          this.$message.warn('您已經(jīng)滑到頂部了')
        } else {
          // 如果不是在頂部，根據(jù)計數(shù)計算展示哪20條數(shù)據(jù)，同時上滑要將計數(shù)減一，將滑條改變位置為了觸發(fā)下一次到頂部的計算
          document.querySelector('#test .test').scrollTo(0, 10)
          this.datascroll= this.data.slice(((this.numberMaxOverView * (scrollCountTop - 1) - this.cacheNum)), (this.numberMaxOverView * scrollCountTop))
          this.scrollCount--
        }
      }
            // 滑到底部
      if ((this.scrollTop + this.offsetHeight) >= this.scrollHeight) {
        this.selectedRowKeys = []
        // 如果是最后一次數(shù)據(jù)展示，計算需要展示的條數(shù)
        let scrollCount = this.scrollCount
        let isLastPage = this.numberMaxOverView - (this.data.length - this.scrollCount * (this.datascroll.length - this.cacheNum))
        let lastNum = this.scrollCount * (this.data.length - this.cacheNum) - isLastPage
        if (isLastPage >= 0) {
          this.datascroll= this.data.slice(lastNum - this.cacheNum, this.data.length)
          this.$message.warn('沒有更多數(shù)據(jù)了')
        } else {
          // 如果不是最后一次，根據(jù)計數(shù)計算展示哪20條數(shù)據(jù)，同時下滑要將計數(shù)加一，將滑條改變位置為了觸發(fā)下一次底部計算
          document.querySelector('#test.demo').scrollTo(0, 100)
          // 如果是第一次下滑計算緩存不能再是觸頂?shù)?，可以是計算緩存往上10條
          if ((this.numberMaxOverView * scrollCount - this.cacheNum) < 0) {
            this.datascroll= this.data.slice((this.numberMaxOverView - this.cacheNum), (this.numberMaxOverView * 2))
            this.scrollCount++
          } else {
            this.datascroll= this.data.slice((this.numberMaxOverView * scrollCount - this.cacheNum), (this.numberMaxOverView * (scrollCount + 1)))
            this.scrollCount++
          }
        }
      }
}