js vue 前端element table表格懒加载

项目需要在前端表格渲染的数据太多，导致页面另外的引入的功能有bug，需求又不想用分页来处理，需要做一个table表格的懒加载

addEventListenerTableList(){
  this.dom = this.$refs.tabList.bodyWrapper
  let i = 0 //这里设置i=0是因为在监听外面拿到的scrollHeight不对，所以需要在监听里面拿到第一次的的高度
  let firstHeight = 0
  this.dom.addEventListener('scroll', () => {
    i ++ 
    // 滚动距离
    if (i == 1){
      firstHeight = this.dom.scrollHeight || this.dom.scrollHeight
    }
    let scrollTop = this.dom.scrollTop
    // 变量windowHeight是可视区的高度
    let windowHeight = this.dom.clientHeight || this.dom.clientHeight
    // 变量scrollHeight是滚动条的总高度
    let scrollHeight = this.dom.scrollHeight || this.dom.scrollHeight
    if (scrollTop + windowHeight == scrollHeight){// 判断滚动条是否已经拉到了最下面
      let i = scrollHeight/firstHeight
      let sliceArrData = this.cross_table7.slice(20*i, 20*(i+1))//此处的cross_table7是存储的拿到的几万条数据，每次滚动条到最下的时候截取20条然后放到页面展示的table表格中
      this.cross_table2 = this.cross_table2.concat(sliceArrData)
    }
  })
},

** 这里的懒加载只能算是勉强应付，如果一直往下拉会导致页面table的dom元素越来越多，到时候该卡还是要卡，最简单的方法还是通过分页来避免页面卡顿，或者在懒加载下拉的时候只渲染当前能看到的那几行的dom元素，不展示的dom元素的销毁，站内有大佬的写法**