vue中数据滚动显示 实现Element-UI中el-table内数据的懒加载

工作中我们经常会用到element-ui组件库中的le-table组件来展示数据，但当table的数据源数量过大的时候统一展示可能会出现页面卡顿，且会影响用户体验，为此我们可以尝试对el-table中的数据做懒加载的效果展示：

1. 挂在阶段监听el-table的scroll滚动事件

2. 当table表格滚动条的位置+调试的固定高度+要显示数据的高度>=el-table-body(当前加载出的table数据总高度)时就可以向table数据源中push进新的数据了

// 1.在页面挂在阶段监听el-table组件的滚动事件
    mounted() {
        this.$refs.table.$el.addEventListener('scroll',scrollmethods)
    },
    scrollmethods(e) {
      // 获取到table表格（可视）的dom
      let realNode = e.srcElement;
      // 获取到table所有数据的真实dom
      let tableBOM = this.$refs.table.$el.querySelector('el-table-body');
      // 如果table数据的总高度 <= 可视table滚动条到顶部的距离+550固定值（这个大家根据实际情况调试）+20条数据的高度
      if(tableBOM.offsetHeight <= realNode.scrollTop + 550 + (20*3)) {
        // 下面是模拟向table数据源中新添加新的数据
        this.tableData = this.tableData.push(arr);
      }
    }

补充：另外也可以使用scrollHeitht(总高度)-scrollTop(页面被卷曲高度)-clientHeight(可视区高度)=0来进行判断，

offsetHeitht：指元素的像素高度，高度包含该元素的垂直内边距和边框，且是一个整数。

scrollHeight：指元素的总高度，包含滚动条中的内容。只读属性。不带px单位。

scrollTop：当元素出现滚动条时，向下拖动滚动条，内容向上滚动的距离。可读可写属性。不带px单位。如果该元素没有滚动条，则scrollTop的值为0，该值只能是正值。

clientHeight：元素客户区的大小，指的是元素内容及其边框所占据的空间大小，实际上就是可视区域的大小。

若-页面被卷曲的高度-可视范围的高度=0就i加载数据