我的项目中须要表格数据主动滚动,我的项目基于element-plus,办法如下:
function useElTableScroll(dom, autoScrollFlag) { const scrollTop = ref(0) //内容高度 const scrollHeight = ref(0) //滚动区域 const scrollConHeight = ref(0) //定时器 const timer = ref(null) //定时器 const timerout = ref(null) var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame; var cancelAnimationFrame = window.cancelAnimationFrame || window.mozCancelAnimationFrame; //是否主动滚动 const autoScroll = () => { if (!autoScrollFlag) { return false } timerout.value = setTimeout(() => { scrollConHeight.value = dom.value.$refs.bodyWrapper.clientHeight scrollHeight.value = dom.value.$refs.tableBody.clientHeight scrollStep() }, 3000) } //滚动增加 function scrollStep() { scrollTop.value++ if ( scrollTop.value > scrollHeight.value - scrollConHeight.value && scrollHeight.value > 0 ) { timerout.value && clearTimeout(timerout.value) setTimeout(() => { scrollTop.value = 0 dom.value.setScrollTop(scrollTop.value) autoScroll() }, 3000) } else { timer.value = requestAnimationFrame(scrollStep) } dom.value.setScrollTop(scrollTop.value) } //革除滚动 function clearScroll() { timer.value && cancelAnimationFrame(timer.value) timerout.value && clearTimeout(timerout.value) } //鼠标进入 function cellMouseEnter() { clearScroll() } //鼠标移出 function cellMouseLeave() { scrollTop.value = dom.value.$el.querySelector( ".el-scrollbar__wrap" ).scrollTop autoScroll() } return { autoScroll, clearScroll, cellMouseEnter, cellMouseLeave }}export default useElTableScroll
setup中调用如下:
const table = ref(null)const { autoScroll, clearScroll, cellMouseEnter, cellMouseLeave } = useElTableScroll(table, props.autoScroll)onMounted(() => { autoScroll()})onUnmounted(() => { clearScroll()})
props.autoScroll
是内部管制是否主动滚动