vue+element-ui table实现滚动加载

首先在main.js文件注册全局事件,代码如下:

Vue.directive('loadmore', {

  bind(el, binding) {

    var p = 0;

    var t = 0;

    var down = true;

    var selectWrap = el.querySelector('.el-table__body-wrapper')

    selectWrap.addEventListener('scroll', function() {

      //判断是否向下滚动

      p = this.scrollTop;

      // if ( t < p){down=true}else{down=false}

      if(t < p){

        down = true;

      }else{

        down = false;

      }

      t = p;

      //判断是否到底

      const sign = 10;

      const scrollDistance = this.scrollHeight - this.scrollTop - this.clientHeight

      if (scrollDistance <= sign && down) {

        binding.value()

      }

    })

  }

})

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

v-loadmore="loadMore"

在methods中调用loadMore

这样就实现啦!!!

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • "use strict";function _classCallCheck(e,t){if(!(e instanc...
    久些阅读 2,049评论 0 2
  • rljs by sennchi Timeline of History Part One The Cognitiv...
    sennchi阅读 7,438评论 0 10
  • 深入响应式 追踪变化: 把普通js对象传给Vue实例的data选项,Vue将使用Object.defineProp...
    冥冥2017阅读 4,896评论 6 16
  • 在很多所谓的九零后作家眼里,“的”、“地”、“得”是没什么两样的,大可以闭着眼来用,而作证的,便是他们的光辉著作。...
    徒忧子阅读 315评论 4 5
  • 最近体检,发现身体有点小问题——血压偏高了,150/90。 医生说,得连续测量几次,血压都高,才能确认是血压偏高,...
    没心没肺的猫阅读 280评论 3 4