vue中element-ui table滚动加载

1. //1.在main.js里注册
2.  Vue.directive('loadmore', {
3.  bind(el, binding) {
4.  const selectWrap = el.querySelector('.el-table__body-wrapper')
5.  selectWrap.addEventListener('scroll', function() {
6.  let sign = 0
7.  const scrollDistance = this.scrollHeight - this.scrollTop - this.clientHeight
8.  if (scrollDistance <= sign) {
9.  binding.value()
10.  }
11.  })
12.  }
13.  })
16. //2.在el-table组件中，使用自定义的事件：v-loadmore=“loadMore”
19. //3.在methods中调用loadMore
20. loadMore() {
21.  if(this.aq == false){//是否已经全部加载
22.  return
23.  }
24.  if(this.page == 1){//首次加载页码加一
25.  this.page++
26.  }
28.  this.$axios({
29.  method:'get',
30.  url:数据接口地址,
31.  params:{
32.  page:this.page,
33.  limit:this.limit
34.  }
35.  }).then(res=>{
36.  if(res.data.length > 0){//有数据
37.  this.page++ //页码加一，下次查询
38.  res.data.forEach(res => {
39.  this.tableData.push(res)//push到表格数据集合
40.  });
41.  }else{
42.  this.aq = false //没有数据了
43.  }
44.  })
45.  },