vue element-ui el-table滚动加载数据 - 掘金

第一种：

main.js

import Vue from 'vue'

Vue.directive('loadmore', {
  bind(el, binding) {
    const selectWrap = el.querySelector('.el-table__body-wrapper')
    selectWrap.addEventListener('scroll', function () {
      let sign = 3
      const scrollDistance = this.scrollHeight - this.scrollTop - this.clientHeight
      if (Math.ceil(scrollDistance) <= sign) {
        binding.value()
      }
    })
  },
})

表单组件测试代码，这里测试了50万条数据

<template>
  <div>
    <el-table v-loadmore="loadMore" :data="tableData.slice(0, rangeNumber)" height="60vh" border style="width: 100%">
      <el-table-column prop="date" label="日期" width="180"></el-table-column>
      <el-table-column prop="name" label="姓名" width="180"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
    </el-table>
  </div>
</template>

<script>
  export default {
    name: 'Test',
    data() {
      return {
        tableData: [],
        rangeNumber: 15,
      }
    },
    created() {
      let table = []
      for (let i = 0; i < 500000; i++) {
        let addData = {
          date: `日期${i}`,
          name: `姓名${i}`,
          address: `地址${i}`,
        }
        table.push(addData)
      }
      this.tableData = table
    },
    methods: {
      loadMore() {
        this.rangeNumber += 15
        // do something
      },
      //
loadMore() {
      this.dataListLoading = true;
      let timer = null;
      let curlens = this.dataList.length;
      let showlens = this.displayDataList.length;
      console.log(curlens, "curlens", showlens, "showlens");
      if (showlens >= curlens) {
        if (timer) {
          clearTimeout(timer);
        }
        this.dataListLoading = false;
        console.log("el-table 已经加载全部数据了!");
        return;
      } else {
        if (timer) {
          clearTimeout(timer);
        }
        timer = setTimeout(() => {
          this.displayDataList.push(
            ...this.dataList.slice(showlens, showlens + 50)
          );
          this.dataListLoading = false;
          console.log("el-table 滚动加载数据!");
        }, 1500);
      }
    },
    },
  }
</script>

<style lang="scss" scoped></style>

第二种：

<el-table 
    :data="DataList"
    :show-header="false"
    row-class-name="table-row-class"
    height="500"
    ref="table1"
    @row-click="rowClick">

</el-table>

this.$refs.table1.bodyWrapper.addEventListener('scroll', (res) => {
  const height = res.target
  const clientHeight = height.clientHeight
  const scrollTop = height.scrollTop
  const scrollHeight = height.scrollHeight

  if (clientHeight + scrollTop === scrollHeight) {
    this.listQuery.pageNo++
    this.listAuthPage()
  }
}, true)