Vue3+Element Plus 实现 el-table 表格组件滚动是否触底监听判断

问题描述

Element Plus 中的 el-table 组件暴露出了 scroll 事件，表格被用户滚动后会触发，暴露出横向和竖向的滚动距离，未暴露出表格的DOM对象。

({ scrollLeft: number, scrollTop: number }) => void

此时，可以通过表格的引用对象 tableRef 来获取表格可视化区域高度 scrollHeight 和表格总高度 clientHeight，然后判断滚动距离 scrollTop 与 scrollHeight 之和是否大于 clientHeight 来判断是否竖向滚动触底。

解决方法

<template>
  <el-table ref="tableRef" @scroll="handleScroll"></el-table>
</template>

<script setup>
import { ref } from 'vue'

// 表格引用
const tableRef = ref(null)

/**
 * 处理用户滚动表格
 */
const handleScroll = (e) => {
   // 拖动横向滚动条则不处理
  if (e.scrollTop == 0) {
    return
  }
  
  // 可视区域的高度
  const scrollHeight = tableRef.value.$refs.bodyWrapper.scrollHeight
  // 表格的总高度，包括不可见部分
  const clientHeight = tableRef.value.$refs.tableBody.clientHeight
  // 滚动条距离顶部的距离
  // 此处操作是为了避免在电脑屏幕缩放级别为125%、150%时，由于浮点数计算导致不满足触底判断条件，从而未能正确判断触底的问题
  const scrollTop = Math.round(e.scrollTop) + 1
    
  // 是否触底判断
  const isBottom = scrollHeight + scrollTop >= clientHeight

  if (isBottom) {
    console.log('表格滚动触底了')
  }
}
</script>