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// 是否触底判断const isBottom = scrollHeight + e.scrollTop >= clientHeightif (isBottom) {console.log('表格滚动触底了')}
}
</script>