element -- Table表格中的无限加载

项目中在表格中用到了无限加载，可用的实现方法有3种，三种方法各有优缺点。

1、使用element的InfiniteScroll 无限滚动

妄想加在表格内，失败了。加在表格外层，表头会跟着移动，不是特别理想。
https://element.eleme.cn/#/zh-CN/component/infiniteScroll

<div
      v-infinite-scroll="loadMore"
      infinite-scroll-disabled="loading"
      infinite-scroll-distance="20"
      style="height:500px;overflow: auto;"
        >
      <el-table :data="tableData" >
        <el-table-column prop="name" label="名称"></el-table-column>
      </el-table>
      <p v-if="tableData.length&&loading" class="list-loading">加载中...</p>
      <p v-if="tableData.length&&isEnd" class="list-end">没有更多了</p>
</div>

2、监听表格滚动

在main.js中注册全局事件，监听表格滚动位置是否到底，触发绑定方法。
在需要无限加载的表格中绑定事件v-loadmore="loadMore"（表格滑动到底部触发loadMore）
https://www.jianshu.com/p/4f0142d737a0

Vue.directive('loadmore', {
  bind(el, binding) {
    var p = 0;
    var t = 0;
    var down = true;
    var selectWrap = el.querySelector('.el-table__body-wrapper')
    selectWrap.addEventListener('scroll', function () {
      //判断是否向下滚动
      p = this.scrollTop;
      if (t < p) {
        down = true;
      } else {
        down = false;
      }
      t = p;
      //判断是否到底
      const sign = 10;
      const scrollDistance = this.scrollHeight - this.scrollTop - this.clientHeight
      if (scrollDistance <= sign && down) {
        binding.value()
      }
    })
  }
})

3、使用vue-infinite-loading插件，用法如下链接

https://codepen.io/regchiu/pen/pMPPQZ