?

?表格功能：自動滾動，鼠標移入停止滾動，移出繼續滾動。如果想加觸底加載新數據可以判斷

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>