vue element-ui el-table滚动加载数据

9,232 阅读1分钟

  当el-table需要一次性加载大量数据时,渲染会十分缓慢,而此时的需求又不可以进行分页,所以我们可以通过滚动加载的形式,分几次来获取数据,其实也是变相的向后台进行分页获取数据。
   注意: 网上也有很多类似的方法,但是网上的方法触碰到底部会触发一次loadMore方法,上移离开又会触发一次,触发太频繁了。
  步骤:

  1. 为 el-table 全局注册自定义指令,用来监听 el-table 滚动到底部时的事件,在main.js中注册
Vue.directive('loadmore', {
  bind(el, binding) {
    const selectWrap = el.querySelector('.el-table__body-wrapper');
    selectWrap.addEventListener('scroll', function () {
      if (this.scrollHeight - this.scrollTop <= this.clientHeight) {
        binding.value();
      }
  }
})
  1. 给需要滚动加载的表格添加自定义事件,v-loadmore=”loadMore”。
<el-table ... v-load="loadMore" ...>
  ......
  ......
  ......
</el-table>
  1. 在methods中定义触发的事件。
loadMore(){
  console.log('el-table 已经滚到底部')
  // do something
}