antdv的table因数据量过大导致的卡顿问题及解决

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条数据，就都展示了就好
      if (this.data.length < 20) {
        this.dataScroll= this.data
        // 滑到顶部也是给个提示
        if (this.scrollTop === 0) {
          this.$message.warn('您已经滑到顶部了')
        }
        // 滑到底部还是给个提示
        if ((this.scrollTop + this.offsetHeight) >= this.scrollHeight) {
          this.$message.warn('没有更多数据了')
        }
        return
      }
       // 滑到顶部scrollTop为0
      if (this.scrollTop === 0) {
        this.selectedRowKeys = []
        // 计数变为1，即如果是1就代表滑到顶部了，取0-20条数的告警在可视区域
        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是要在这一页展示的数据条数
          this.$message.warn('您已经滑到顶部了')
        } else {
          // 如果不是在顶部，根据计数计算展示哪20条数据，同时上滑要将计数减一，将滑条改变位置为了触发下一次到顶部的计算
          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 = []
        // 如果是最后一次数据展示，计算需要展示的条数
        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('没有更多数据了')
        } else {
          // 如果不是最后一次，根据计数计算展示哪20条数据，同时下滑要将计数加一，将滑条改变位置为了触发下一次底部计算
          document.querySelector('#test.demo').scrollTo(0, 100)
          // 如果是第一次下滑计算缓存不能再是触顶的0，可以是计算缓存往上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++
          }
        }
      }
}