在vue中表格滚动加载数据的几种方式_vue表格滚动加载数据-优快云博客

在vue中表格滚动加载数据的几种方式

表格滚动加载数据本次将分两种类型进行讲解，分别是表格内加载（即监听el-table中的滚动事件，好处是表格的表头可以固定住）、表格的父级元素绑定滚动时间加载数据。

一、监听表格内的滚动事件（可固定住表头）

1、vue-infinite-loading

使用文档说明链接：vue-infinite-loading

好处是：可以固定住表头，监听表格的滚动，且每次滚动到底部加载完数据，滚动条依旧停留在上一次的浏览记录中

坏处是：在首次如果数据没有能够撑开表格的高度，会一直触发滚动事件，等到数据撑开表格后，继续监听表格的滚动事件

简单的使用步骤如下所示：

a、安装vue-infinite-loading，

npm install vue-infinite-loading -S

b、设置表格的高度，利用el-table中的slot属性，在表格的最后将vue-infinite-loading插件放入，如下所示：

      <el-table :data="list" border fit highlight-current-row width="100%" class="pushtable" height="300px" id="pushtable" style="margin-top: 20px;">
      <el-table-column align="center" label="司机ID">
        <template slot-scope="scope">
          <span>{{ scope.row.id}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="累计推送轮数">
        <template slot-scope="scope">
          <span>{{ scope.row.totalPushRound}}</span>
        </template>
      </el-table-column>
      <infinite-loading
      slot="append"
      @infinite="infiniteHandlera"
      force-use-infinite-wrapper=".el-table__body-wrapper">
        <div slot="spinner" style="margin-top: 10px;margin-bottom: 10px;">加载中...</div>
        <div slot="no-more" style="margin-top: 10px;margin-bottom: 10px;">没有更多了</div>
     </infinite-loading>
    </el-table>


// 滚动事件的实现
    infiniteHandlera ($state) {
      if (this.list.length < 20) {
        this.list.push({id: 3, totalPushRound: '测试'})
        setTimeout(() => {
          $state.loaded()
          console.log('12')
        }, 2000)
      } else {
        $state.complete()
      }
    }

还有一个很nice的点，就是官方还提供了加载中、加载完毕等等插槽供君选择（需注意一个点，如一个页面有多个表格，需要更加具体的css选择器去找到，force-use-infinite-wrapper=".el-table__body-wrapper"这个说明是在监听类为.el-table__body-wrapper的表格）

2、在vue中直接注册滚动事件，利用vue的directives，这样解决上面的在数据没有撑开表格之前，持续执行事件，这个注册事件仅仅针对于表格的滚动到底部的事件

  directives: {
    load: {
      bind (el, binding) {
        let p = 0
        let t = 0
        let down = true
        let 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()
          }
        })
      }
    }
  }

二、监听表格外层元素的滚动事件

1、其实上面两种也可以适用于除了表格之外的元素的滚动事件，因为这篇文章主要针对于表格的滚动事件，对于在此做了分类而已～

2、利用el-element中提供的https://element.eleme.cn/#/zh-CN/component/infiniteScroll提供的无限滚动，具体使用方法，请看官方文档。这里说一下个人觉得不适用于表格的原因。但不确定自己的想法是否对的，如有错误，希望大佬们来指教～

el-element中的无限滚动似乎是针对元素的添加才有效果的，也就是如果我每次只是给表格添加数据，他加载完就不会停留在上一次的浏览记录，而是在底部，导致会持续在加载（除非手动设置滚动条），直到数据加载完毕后才停止事件的执行。但是如果你是直接循环元素，类似<div v-for="item in list"></div>每次加载完就会停留在上一次的浏览记录了。

3、vue-loadmore 和 vue-mugen-scroll

使用文档链接：vue-loadmore、vue-mugen-scroll

写到这里有点累了，大家自己去看看文档吧，哈哈哈～