数据量大，前端解决页面加载慢的问题

antdesign 一. 采用scroll滚动加载剩余数据，但是滚动时table主体数据， 表头也会随之滚动。就采用了第二种，定时加载数据

1. 首先获取数据先加载50条。
2. 随后在table上监听scroll事件（紧跟着第1步后面）

document.getElementById('table').addEventListener('scroll', this.onScrollHandle)

3. 定义onScrollHandle方法

 onScrollHandle() {
      var table = document.getElementById('table')
      // scrollTop: 被卷入的高度
      var scrollTop = table.scrollTop
      // scrollHeight: 正文高度，包括被卷入的高度
      var scrollHeight = table.scrollHeight
      // clientHeight: 可视区的高度
      var clientHeight = table.clientHeight
      // 本案例 scrollHeight、clientHeight是不变的
      if (scrollHeight - scrollTop - clientHeight <= 0) {
        this.loadMoreData()
      }
    },

4.定义加载更多数据的loadMoreData方法

 loadMoreData() {
      let showLen = this.recordDetails.voucherDetails.length
      if (this.allVoucherDetails.length - this.recordDetails.voucherDetails.length >= 50) {
        this.recordDetails.voucherDetails.push(...this.allVoucherDetails.slice(showLen, showLen + 50))
      } else {
        const len = this.allVoucherDetails.length - this.recordDetails.voucherDetails.length
        this.recordDetails.voucherDetails.push(...this.allVoucherDetails.slice(showLen, showLen + len))
      }
    },

二. 定时加载数据

 this.recordDetails = Object.assign(this.recordDetails, data)
          this.allVoucherDetails = data.voucherDetails
          console.log('alll>>>', data.voucherDetails)
          this.recordDetails.voucherDetails = data.voucherDetails.slice(0, 50)
          let showLen = this.recordDetails.voucherDetails.length
          let allLen = this.allVoucherDetails.length
          if (this.allVoucherDetails.length > 50) {
            this.timer = setInterval(() => {
              if (this.recordDetails.voucherDetails.length === allLen) {
                clearInterval(this.timer)
                this.editFlag = false
              } else {
                if (this.allVoucherDetails.length - this.recordDetails.voucherDetails.length >= 50) {
                  this.recordDetails.voucherDetails.push(...this.allVoucherDetails.slice(showLen, showLen + 50))
                } else {
                  const len = this.allVoucherDetails.length - this.recordDetails.voucherDetails.length
                  this.recordDetails.voucherDetails.push(...this.allVoucherDetails.slice(showLen, showLen + len))
                }
                console.log('showLen', this.recordDetails.voucherDetails.length)
              }
            }, 2000)
          } else {
            this.editFlag = false
            clearInterval(this.timer)
            return
          }