element table 滚动懒加载的实现

这里封装了一个全局属性

Vue.directive('tableScroll', {
    bind(el, binding, vnode, oldVnode) {
        let scrollTop = 0;
        let dom = el.querySelector(".el-table__body-wrapper");
        dom.addEventListener("scroll", (e) => {
            let isBottom = dom.scrollHeight - dom.scrollTop === dom.clientHeight;
            let isHorizontal = scrollTop == dom.scrollTop;
            if (isBottom && !isHorizontal && dom.scrollTop != 0) {
                if (binding.value) {
                    binding.value()
                }
            }
            if (!isHorizontal) {
                scrollTop = dom.scrollTop;
            }
        });
    }
})

 

使用方法

<el-table
            v-table-scroll="setTableData"
            :data="tableData"
            :height="tableHeight"
            style="margin-top:10px"
            v-loading="loading"
            element-loading-text="加载中..."
            element-loading-spinner="el-icon-loading"
            element-loading-background="rgba(0, 0, 0, 0.8)"
            highlight-current-row
            @current-change="handleCurrentChange"
            ref="table"
          ></el-table>

使用v-table-scroll绑定你的数据加载方法

 

这里把方法放上,算是一个示例吧

setTableData(clear) {
      if (clear == true) {
        this.tableData = [];
        this.currentRow = null;
        this.pageIndex = 1;
        this.hasMore = true;
      }
      if (!clear && !this.hasMore) {
        this.$message.warning("没有下一页了... (～￣▽￣)～");
        return;
      }
      this.loading = true;
      this.$post("abc/abc", {
        dateTime: this.date,
        pageSize: this.pageSize,
        pageIndex: this.pageIndex,
        staCondition: this.serch,
      })
        .then((r) => {
          if (r && r.data) {
            //tableData为绑定的数据
            let res = r.data.DATA || [];
            this.tableData.push.apply(this.tableData, r.data.DATA);
            if (this.tableData.length < r.data.COUNT) {
              this.pageIndex++;
              this.hasMore = true;
            } else {
              this.hasMore = false;
            }
            if (clear && this.tableData.length > 0) {
              this.$refs.table.setCurrentRow(this.tableData[0]);
            }
          }
        })
        .finally(() => {
          this.loading = false;
        });
    }