标签：el vue res element ui table loadMore page 加载

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.  },

标签：el,vue,res,element,ui,table,loadMore,page,加载
来源： https://www.cnblogs.com/tzwbk/p/16623848.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。