el-table 中设置 ref,用来获取元素,必须设置高度才可以滚动,鼠标放上停止自动滚动,可手动滚动,鼠标离开自动滚动

<el-table 
	ref="myTable" 
	height="500" 
	@mouseover.native="clearScroll" 
	@mouseleave.native="createScroll"
></el-table>
import { ref, onMounted, onUnmounted } from 'vue'
let timer = null
let myTable = ref(null)

const clearScroll = () => {
	clearInterval(timer)
	timer = null
}
const createScroll = () => {
	clearScroll()
	// 拿到 table
	const table = myTable.value.layout.table.refs
	// 拿到可以滚动的元素
	const tableWrapper = table.bodyWrapper.firstElementChild.firstElementChild

	timer = setInterval(() => {
		tableWrapper.scrollTop += 1
		// 判断是否滚动到底部,如果到底部了置为0(可视高度+距离顶部=整个高度)
		if (tableWrapper.clientHeight + tableWrapper.scrollTop == tableWrapper.scrollHeight) {
			tableWrapper.scrollTop = 0
		}
	}, 100)
}

onMounted(() => {
	createScroll()
})
onUnmounted(() => {
	clearScroll()
})
GitHub 加速计划 / eleme / element
13
1
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:19 天前 )
c345bb45 1 年前
a07f3a59 * Update transition.md * Update table.md * Update transition.md * Update table.md * Update transition.md * Update table.md * Update table.md * Update transition.md * Update popover.md 1 年前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐