vue中element-ui table滚动加载

vue中element-ui table滚动加载
强烈推介IDEA2020.2破解激活,IntelliJ IDEA 注册码,2020.2 IDEA 激活码
//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 //没有数据了
                    }
            })
         },

 

本文来源huayang183,由架构君转载发布,观点不代表Java架构师必看的立场,转载请标明来源出处:https://javajgs.com/archives/18736

发表评论