定时器设置托条累加(鼠标覆盖时停止滚动)
<template>
<el-table ref="reportTable" :data="tableData" height="500px">
<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" width="180" />
</el-table>
</template>
<script>
import { ref, onMounted } from 'vue'
import common from '@/utils/common.js'
export default {
setup(props) {
const tableData = ref([
{date: '2023-05-01', name: '1', address: '123'},
{date: '2023-05-02', name: '2', address: '234'},
{date: '2023-05-03', name: '3', address: '345'},
{date: '2023-05-04', name: '4', address: '456'},
{date: '2023-05-05', name: '5', address: '567'},
{date: '2023-05-06', name: '6', address: '678'},
{date: '2023-05-07', name: '7', address: '789'}
])
const reportTable = ref()
onMounted(() => {
nextTick(() => {
common.scrollUp(reportTable.value)
})
})
return {
tableData,
reportTable
}
}
}
</script>
utils文件夹下common.js
import { ref } from 'vue'
export default {
scrollUp(tableRef) {
const demo = tableRef.$refs.bodyWrapper.getElementsByClassName('el-scrollbar__wrap')[0]
const tableScroll = ref(true)
demo.addEventListener('mouseover', () => {
tableScroll.value = false
})
demo.addEventListener('mouseout', () => {
tableScroll.value = true
})
setInterval(() => {
if(tableScroll.value) {
demo.scrollTop += 1
if(demo.clientHeight + demo.scrollTop === demo.scrollHeight) {
demo.scrollTop = 0
}
}
}, 100)
}
}