element -- Table表格中的无限加载

项目中在表格中用到了无限加载,可用的实现方法有3种,三种方法各有优缺点。

1、使用element的InfiniteScroll 无限滚动

妄想加在表格内,失败了。加在表格外层,表头会跟着移动,不是特别理想。
https://element.eleme.cn/#/zh-CN/component/infiniteScroll

<div
      v-infinite-scroll="loadMore"
      infinite-scroll-disabled="loading"
      infinite-scroll-distance="20"
      style="height:500px;overflow: auto;"
        >
      <el-table :data="tableData" >
        <el-table-column prop="name" label="名称"></el-table-column>
      </el-table>
      <p v-if="tableData.length&&loading" class="list-loading">加载中...</p>
      <p v-if="tableData.length&&isEnd" class="list-end">没有更多了</p>
</div>


2、监听表格滚动

在main.js中注册全局事件,监听表格滚动位置是否到底,触发绑定方法。
在需要无限加载的表格中绑定事件v-loadmore="loadMore"(表格滑动到底部触发loadMore)
https://www.jianshu.com/p/4f0142d737a0

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;
      }
      t = p;
      //判断是否到底
      const sign = 10;
      const scrollDistance = this.scrollHeight - this.scrollTop - this.clientHeight
      if (scrollDistance <= sign && down) {
        binding.value()
      }
    })
  }
})


3、使用vue-infinite-loading插件,用法如下链接

https://codepen.io/regchiu/pen/pMPPQZ

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

推荐阅读更多精彩内容

  • vue 中的自定义指令是对底层 dom 进行操作,下面以实现滚动到底部加载数据,实现无限加载来介绍如何自定义一个简...
    ltaoo阅读 15,704评论 10 20
  • 开始之前 今儿的项目又遇见一个不按套路出牌的设计:一个列表页,设计图上是不分页查询,后台给的接口是分页查询。跟产品...
    Geeker工作坊阅读 1,277评论 0 1
  • 素描从广义上讲,顾名思义,包含有“朴素的描写”之意。它是用铅笔、毛笔、钢笔、碳笔,甚至是现在流行的手写版的画笔等工...
    素描桃桃阅读 9,574评论 1 59
  • 1、变量的定义 在Python中,每个变量在使用之前都必须赋值,变量只有在赋值之后才会被创建。 使用=可以给变量赋...
    LAMGAMLEUNG阅读 15,574评论 0 5
  • 01、萌生写作兴趣 2017年2月,我开始在简书写作,那个时候算不上真正意义上的写作,都是写一些生活感悟,反思日记...
    西西雅阅读 578评论 2 12