美文网首页
vue elmentui table 滚动加载

vue elmentui table 滚动加载

作者: 草祭木初 | 来源:发表于2018-10-22 16:32 被阅读0次

用的是 vue-infinite-loading 组件

<el-table
    :height="380"
    v-loading="listLoading"
    :key="key"
    :data="list"
    :empty-text="actionLogPage.isFirstLoad ? '请根据筛选条件搜索筛选!' : '暂无数据'"
    element-loading-text="拼命加载中"
    stripe fit highlight-current-row>
    <el-table-column
      type="index">
    </el-table-column>

    <template slot="append">

      <infinite-loading ref="infinite" @infinite="getDataList" :distance="20" forceUseInfiniteWrapper=".el-table__body-wrapper">
        <loading></loading>
        <span slot="no-more">
        —————— 加载完成 ———————
        </span>
        <span slot="no-results">暂无数据</span>
      </infinite-loading>

    </template>
</el-table>

上面elmentui的table定义 但是大家注意 <template slot="append"> 是在一层div里面的
下面是生成的html

<div class="el-table__body-wrapper is-scrolling-left" style="height: 336px;">
    <table cellspacing="0" cellpadding="0" border="0" class="el-table__body" style="width: 2131px;">
    </table><!---->
    <div class="el-table__append-wrapper"><!-- 默认找的是这层 -->
        <div data-v-3aed59f8="" data-v-3c57fe79="" class="infinite-loading-container">
        </div>
    </div>
</div>

而 infinite-loading默认是找它的父容器作为滚动窗口
所以用到了 forceUseInfiniteWrapper=".el-table__body-wrapper" 这里是指定了 infinite-loading的滚动窗口

getScrollParent(elm = this.$el) {
      let result;

      if (typeof this.forceUseInfiniteWrapper === 'string') {
        result = elm.querySelector(this.forceUseInfiniteWrapper);  // 就是这里 用的是原生的 query
      }

      if (!result) {
        if (elm.tagName === 'BODY') {
          result = window;
        } else if (!this.forceUseInfiniteWrapper && ['scroll', 'auto'].indexOf(getComputedStyle(elm).overflowY) > -1) {
          result = elm;
        } else if (elm.hasAttribute('infinite-wrapper') || elm.hasAttribute('data-infinite-wrapper')) {
          result = elm;
        }
      }

      return result || this.getScrollParent(elm.parentNode);
    },

在 2.3.5版本的官方文档上并没有列出这个属性 看源码找到了, 弄了好几个小时 诶~~~~

相关文章