Vue自定义指令监听el-table的滚动事件，滚动到底部加载更多数据

---

前言

Vue自定义指令监听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()
      }
    })
  },
})

<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() {
     
    },
    methods: {
      loadMore() {
        //加载更多逻辑代码
      },
    },
    },
  }
</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)