element plus table 滚动监听 触底

参考了网上的其他的element ui 的滚动触底的方法，但是无法获取bodyWrapper的scrollTop,这里我就直接去找了那个提供实际滚动的容器.el-scrollbar__wrap了。

 <el-table ref="TableRef" :data="[]" style="width: 100%" height="400">
  </el-table>
  
  <script lang="ts">
  import { defineComponent, onMounted, onUnmounted, ref } from 'vue'
  
  export default defineComponent({
  name: 'AbnormalAlarm',
  setup() {
	// table的虚拟dom
	const TableRef = ref()
	// 滚动行为
    function scrollBehavior(e: any) {
      // 滚动方向判定
      const scrollDirection = e.deltaY > 0 ? 'down' : 'up'
      if (scrollDirection === 'down') {
        // 获取提供实际滚动的容器
        const dom = TableRef.value.$refs.bodyWrapper.getElementsByClassName('el-scrollbar__wrap')[0]
        
        const { clientHeight, scrollTop, scrollHeight } = dom
        // 父容器高度 + 子容器距离父容器顶端的高度 = 子容器可滚动的高度
        if (clientHeight + scrollTop === scrollHeight) {
          console.log('竖向滚动条已经滚动到底部')
        }
      }
    }
    onMounted(() => {
      // 挂载
      TableRef.value && TableRef.value.$refs.bodyWrapper.addEventListener('mousewheel', scrollBehavior)
    })
    onUnmounted(() => {
      // 卸载
      TableRef.value && TableRef.value.$refs.bodyWrapper.removeEventListener('mousewheel', scrollBehavior)
    })
  }
  </script>