表格功能：自动滚动，鼠标移入停止滚动，移出继续滚动。如果想加触底加载新数据可以判断

scrollWrap.scrollTop和maxScrollTop大小来加载数据，另写逻辑。

<template><el-table ref="eltable" :data="tableData" style="width: 100%; height: 300px" @cell-mouse-enter="tableEnter"@cell-mouse-leave="tableLeave"><el-table-column prop="date" label="Date" width="180" /><el-table-column prop="name" label="Name" width="180" /><el-table-column prop="address" label="Address" /></el-table>
</template>
<script setup>
import { ref, onUnmounted, reactive, onMounted, nextTick } from 'vue';const tableData = ref([{date: '2016-05-03',name: 'Tom1',address: 'No. 189, Grove St, Los Angeles',},{date: '2016-05-02',name: 'Tom2',address: 'No. 189, Grove St, Los Angeles',},{date: '2016-05-04',name: 'Tom3',address: 'No. 189, Grove St, Los Angeles',},{date: '2016-05-01',name: 'Tom4',address: 'No. 189, Grove St, Los Angeles',},{date: '2016-05-03',name: 'Tom5',address: 'No. 189, Grove St, Los Angeles',},{date: '2016-05-02',name: 'Tom6',address: 'No. 189, Grove St, Los Angeles',},{date: '2016-05-04',name: 'Tom7',address: 'No. 189, Grove St, Los Angeles',},{date: '2016-05-01',name: 'Tom8',address: 'No. 189, Grove St, Los Angeles',},
])
const eltable = ref();
const timer = ref();
const tableAnimate = () => {const table = eltable.value?.$el;if (!table) return;const scrollWrap = table.querySelector('.el-scrollbar__wrap');if (!scrollWrap) return;const rowHeight = table.querySelector('.el-table__body tbody tr').offsetHeight; // 行高const tableHeader = table.querySelector('.el-table__header-wrapper').offsetHeight //表格表头高度const tableHeight = table.offsetHeight //表格可视区域高度const rowAllHeight = rowHeight * tableData.value.length //行的总高const maxScrollTop = rowAllHeight - tableHeight + tableHeader;// 防止多次绑定定时器，提前清除之前的定时器if (timer.value) {clearInterval(timer.value);}timer.value = setInterval(() => {// 仅在需要时才更新滚动if (scrollWrap.scrollTop < maxScrollTop) {scrollWrap.scrollTop += 1;} else {scrollWrap.scrollTop = 0;}}, 40);
};onUnmounted(() => {if (timer.value) {clearInterval(timer.value);timer.value = null;}
})
// 表格划入暂停动画
const tableEnter = () => {clearInterval(timer.value);timer.value = null;
};
// 表格划出重启动画
const tableLeave = () => {tableAnimate();
};
onMounted(() => {setTimeout(() => {tableAnimate();})
})
</script>

这样写出来的也可以实现自适应时自动滚动。

<template><div style="width: 700px;height: 20vh;"><el-table ref="eltable" :data="tableData" style="width: 100%; height: 100%" @cell-mouse-enter="tableEnter"@cell-mouse-leave="tableLeave"><el-table-column prop="date" label="Date" width="180" /><el-table-column prop="name" label="Name" width="180" /><el-table-column prop="address" label="Address" /></el-table></div></template>