vue element table 懒加载 根据滚动条滑动动态加载数据 无分页或分页过大 渲染慢问题

实现思路：先加载一开始会在页面上显示的数据，比如页面能显示20条数据，就先加载20条，剩下的数据监听滚动条，滚动条到底部再加载。
1.在data()中定义三个属性，分别存储数据指针、表格显示的数据和接口中获取的所有数据。

      //数据指针 默认19
      needle:19,
      //表格数据
      tableData:[],
      //所有数据
      allData:[],

2.从接口获取数据，并添加最初20条到tableData中。

        // 所有数据
        this.allData = response.rows;
        // 初始值为19
        this.needle=19;
        this.tableData=[]
        //判断数据长度有没有20个，有就先添加20个，没有直接获取所有数据
        if(this.allData.length>19){
          for(let i=0;i<20;i++){
            this.tableData[i]=this.allData[i]
          }
        }else{
          this.tableData=this.allData
        }

3.定义懒加载函数

    lazyLoading(){
      //获取table的body元素
      let dom = document.querySelector(".el-table__body-wrapper");
      console.log('dom',dom)
      //添加对滚动条的监听
      dom.addEventListener("scroll", (v) => {
        const scrollDistance = dom.scrollHeight - dom.scrollTop - dom.clientHeight;
        console.log("鼠标滑动-scrollDistance",scrollDistance)
        // if (scrollDistance <= 0) {  //分辨率问题，如果设置 100% ，滑倒最底部，scrollDistance的值 可能为 0.201 到 -0.201
        if (scrollDistance <= 1) {
          //等于0证明滚动条已经到底
          // 一条一条加载记录，直至遍历到最后一条
          while(this.needle<this.allData.length-1){
            this.tableData[this.needle]=this.allData[this.needle]
            console.log('this.tableData',this.tableData)
            this.$forceUpdate()
            this.needle++
          }
        }
      });
    },

4.最后将

this.lazyLoading()

放在mounted中

mounted() {
    setTimeout(() => {
      this.lazyLoading();
    }, 1500);
  },