vue+element table表格实现懒加载效果

vue+element table表格实现懒加载效果

业务场景：后端给了一个数组，元素未知，可多可少。当给了成千上万条数据，页面渲染就会卡死，为了解决这个问题，需要实现一个懒加载的效果

设计思路：准备俩个空数组 第一个数组用来获取所以数据，第二个数组用来页面展示，利用滚动条事件，每次触发触底事件，就从第一个数组拿20条，加在第二个数组中。直到第二个数组长度==第一个数组长度时 return。

<el-table ref="visibleData" :data="visibleData" :max-height="tableHeight" stripe class="tableLookClass"></table>
<script>
data(){
	return{
	// 懒加载
      tableHeight:'500px',//懒加载-表格高度
      visibleData:[],//懒加载-表格数据
      lazyCurrentPage: 1,//懒加载-表格页数
      lazyPageSize: 20,//懒加载-每页条数
      tableList:[],//原始表格数据
	}
},
created() {
    this.list()//获取数据
  },
mounted() {
    //懒加载核心方法
    this.lazyLoading();
  },
methods: {
//获取列表
    list() {
      this.loading = true
      list(this.queryForm).then(res => {
        this.tableList = res.data
        this.updateVisibleData();
        this.loading = false
      }).finally(() => {
        this.loading = false;
      });
    },
 // 懒加载核心方法
    lazyLoading(){
      this.$nextTick(() => {//由于我的页面是在一个弹框内，使用this.$nextTick在页面加载完后执行
      let dom = document.querySelector(".el-table__body-wrapper");
      dom.addEventListener("scroll", (v) => {
          const scrollDistance = dom.scrollHeight - dom.scrollTop - dom.clientHeight;
          if (scrollDistance <= 1) {
            //等于0证明已经到底，可以请求接口
            if ( this.visibleData.length >= this.tableList.length ) {
                //判断是否到达底部
                // console.log("我是有底线的 ")
            }
            if (this.visibleData.length < this.tableList.length  ) {
                // console.log("页面已经到达底部,可以请求接口,请求第 "+ this.tableList.length + " 页数据");
                //当前页数小于总页数就请求
                this.lazyCurrentPage++;
                this.updateVisibleData();
            }
          }
          return
      });

      })
    },
    // 懒加载-更新数据
    updateVisibleData() {
      this.loading = true
      const start = (this.lazyCurrentPage - 1) * this.lazyPageSize;
      const end = start + this.lazyPageSize;
      this.visibleData = this.tableList.slice(0, end);
      this.loading = false
    },

}
</script>