在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()
          }
        })
      }
    })

在组件中,使用自定义的事件:

v-loadmore=“loadMore”
在这里插入图片描述

在methods中调用loadMore

loadMore() {
            console.log(this.loadSign)
            if(this.aq == false){
                return
            }
            if(this.page == 1){
                this.page++
            }
            
            this.$axios({
                method:'get',
                url:this.api+'admin/StockLevel',
                params:{
                    enabled:this.value1,
                    page:this.page,
                        limit:this.limit
                }
            }).then(res=>{
                if(res.data.status==1){
                    if(res.data.result.list.length > 0){
                        this.page++
                        res.data.result.list.forEach(res => {
                            res.enabled = res.enabled.toString()
                            this.tableData.push(res)
                        });
                        console.log('到底了', this.page)
                    }else{
                        this.aq = false
                    }
                }
            })
         },

在这里插入图片描述
这样就实现啦!!!

GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:3 个月前 )
c345bb45 7 个月前
a07f3a59 * Update transition.md * Update table.md * Update transition.md * Update table.md * Update transition.md * Update table.md * Update table.md * Update transition.md * Update popover.md 7 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐