用vue做项目时遇到用element-ui实现滚动的table,可以用以下的方法：

一、首先在main.js文件中添加指令

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

二、再用element-ui准备一个table表格

<el-table :data="tableData" height="80%" v-loadmore="loadMore" v-loading="loadingTable"
          element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(10,88,128,0.2)" class="table">
          <el-table-column label="排名" type="index" width="80px"> </el-table-column>
          <el-table-column label="企业名称" prop="enterpriseName" width="160px"> </el-table-column>
          <el-table-column label="企业地址" prop="address" width="400px"> </el-table-column>
          <el-table-column label="入驻时间" prop="time" show-overflow-tooltip> </el-table-column>
</el-table>

三、使用setTimeOut模拟数据返回

export default {
  name: 'EnterpriseEnter',
  props: {},
  data() {
    return {
      loadingTable: false,//给table加一个loading
      tableData: [],//table绑定的数据
      page: {
        pageIndex: 1,
        pageSize: 10
      }
    }
  },
  created() {
    this.getStaffTableData();
  },
  methods: {
      getStaffTableData() {
      const data = new Array(10).fill(0).map((_, index) => (
        {
          enterpriseName: (index % 2 === 0) ? 'company' : 'common',
          address: '广东省深圳市南山区创新街道创新大厦A幢15栋1503号',
          time: '2022-06-09',
        }
      ));
      this.tableData = data;
    },
  },
}
</script>

四、添加表格滚动事件

 methods: {
    // 表格滚动加载事件
    loadMore() {
      this.page.pageIndex++;
      this.loadingTable = true;
      setTimeout(() => {
        const data = new Array(10).fill(0).map((_, index) => (
          {
            enterpriseName: (index % 2 === 0) ? 'company' : 'common',
            address: '广东省深圳市南山区创新街道创新大厦A幢15栋1503号',
            time: '2022-06-09',
          }
        ));
        this.tableData = this.tableData.concat(data);
        this.loadingTable = false;
      }, 1000);
    },
  },

效果如图：