vue+element-ui table实现滚动加载

首先在main.js文件注册全局事件，代码如下：

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}

      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()

      }

    })

  }

})

在组件中，使用自定义的事件：

v-loadmore="loadMore"

在methods中调用loadMore

这样就实现啦！！！