快捷導(dǎo)航

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

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

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

遇到的問(wèn)題

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

解決辦法

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

上代碼

mounted () {
document.querySelector('#test table').addEventListener('scroll', this.handleScroll) // 給dom元素綁定scroll事件，可以在mounted的時(shí)候就給他綁定
},
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
        // 滑到頂部也是給個(gè)提示
        if (this.scrollTop === 0) {
          this.$message.warn('您已經(jīng)滑到頂部了')
        }
        // 滑到底部還是給個(gè)提示
        if ((this.scrollTop + this.offsetHeight) >= this.scrollHeight) {
          this.$message.warn('沒(méi)有更多數(shù)據(jù)了')
        }
        return
      }
       // 滑到頂部scrollTop為0
      if (this.scrollTop === 0) {
        this.selectedRowKeys = []
        // 計(jì)數(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是要在這一頁(yè)展示的數(shù)據(jù)條數(shù)
          this.$message.warn('您已經(jīng)滑到頂部了')
        } else {
          // 如果不是在頂部，根據(jù)計(jì)數(shù)計(jì)算展示哪20條數(shù)據(jù)，同時(shí)上滑要將計(jì)數(shù)減一，將滑條改變位置為了觸發(fā)下一次到頂部的計(jì)算
          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ù)展示，計(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('沒(méi)有更多數(shù)據(jù)了')
        } else {
          // 如果不是最后一次，根據(jù)計(jì)數(shù)計(jì)算展示哪20條數(shù)據(jù)，同時(shí)下滑要將計(jì)數(shù)加一，將滑條改變位置為了觸發(fā)下一次底部計(jì)算
          document.querySelector('#test.demo').scrollTo(0, 100)
          // 如果是第一次下滑計(jì)算緩存不能再是觸頂?shù)?，可以是計(jì)算緩存往上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++
          }
        }
      }
}

注意

addeventlistener沒(méi)辦法綁定上handlescroll事件，

原因目前碰到的有二：

一是你queryselector的時(shí)候沒(méi)找到元素，如果是組件的話去控制臺(tái)看一下元素的class有沒(méi)有綁正確，再不然就給個(gè)你要綁定的id，在它下邊找一找，總之你的dom要綁對(duì)；
二是你用的組件是否需要給定scrollxy的屬性才能綁定scroll事件

可以參考antdv它的list滾動(dòng)無(wú)限加載的思想，如果無(wú)需其他操作只是一個(gè)list的話也可以用虛擬滾動(dòng)的組件實(shí)現(xiàn)vue-virtual-scroller