vue使用elemntui的table组件表格数据懒加载方法

前提：在业务需求下，table表格的数据不支持分页，当数据太多时，就需要用到懒加载

如图，通过判断右侧滚动条的位置来实现数据的切割,代码如下

data () {
        return {
            tableData: [], // 后端一次性返回了所有的数据
            pageSize: 20,
            pageNum: 1,
        };
    },
computed: {
        showTable () {
            const dataSource = this.tableData;
            const now = 0;
            const next = this.pageSize * this.pageNum;
            return dataSource.slice(now, next);
        },
    },
mounted() {
        this.lazyLoad();
    },
methods: {
// 数据懒加载
        lazyLoad() {
            this.$nextTick(() => {
                const arr = document.getElementsByClassName('el-table__body-wrapper'); // 伪数组
                const el = arr[arr.length - 1];
                // 绑定事件
                el.addEventListener('scroll', this.handlerLazyLoad);
            });
        },
        handlerLazyLoad(e) {
        // 滚动条距离底部的距离
            const scrollDistance = e.target.scrollHeight - e.target.scrollTop - e.target.clientHeight;
            if (scrollDistance <= 0) {
                this.pageNum++; // 改变页数后 计算属性会返回新得表格数据
                //这里也可以去掉后端的接口 这样就直接返回了数据 然后进行数据的合并
                /**
                  const res = await this.a({ this.pageNum });
                  if (res.ret === 0) {
                        this.tableData = this.tableData.concat(res.data.list);
                  }
                **/
            }
        },
  },