vue中element-ui table滚动加载

//1.在main.js里注册
 Vue.directive('loadmore', {
      bind(el, binding) {
        const selectWrap = el.querySelector('.el-table__body-wrapper')
        selectWrap.addEventListener('scroll', function() {
          let sign = 0
          const scrollDistance = this.scrollHeight - this.scrollTop - this.clientHeight
          if (scrollDistance <= sign) {
            binding.value()
          }
        })
      }
    })


//2.在el-table组件中,使用自定义的事件:v-loadmore=“loadMore”


//3.在methods中调用loadMore
loadMore() {
            if(this.aq == false){//是否已经全部加载
                return
            }
            if(this.page == 1){//首次加载页码加一
                this.page++
            }
            
            this.$axios({
                method:'get',
                url:数据接口地址,
                params:{
                    page:this.page,
                    limit:this.limit
                }
            }).then(res=>{
                    if(res.data.length > 0){//有数据
                        this.page++ //页码加一,下次查询
                        res.data.forEach(res => {
                            this.tableData.push(res)//push到表格数据集合
                        });
                    }else{
                        this.aq = false //没有数据了
                    }
            })
         },
发布了244 篇原创文章 · 获赞 16 · 访问量 1万+

猜你喜欢

转载自blog.csdn.net/qq_18671415/article/details/105303904