我的项目中须要表格数据主动滚动,我的项目基于 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
是内部管制是否主动滚动