element UI 中table表格循环滚动方法

最新推荐文章于 2025-05-26 16:38:55 发布

小破孩呦

最新推荐文章于 2025-05-26 16:38:55 发布

阅读量5.1k

点赞数 3

分类专栏：前端开发知识文章标签： ui elementui vue.js

本文链接：https://blog.csdn.net/qq_38543537/article/details/122842943

版权

前端开发知识专栏收录该内容

81 篇文章

订阅专栏

这篇博客介绍了如何在Vue项目中实现表格数据的自动滚动效果。通过设置表格的高度和引用，结合JavaScript的setInterval定时器，动态调整表格内部div的scrollTop属性，实现列表从底部滚动到顶部的效果。关键步骤包括获取表格DOM，监听滚动到底部的条件以及滚动位置的重置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先在表格上添加ref和设置高度，如下：

<el-table :data="tableList" height="300" ref="table"></el-table>

循环方法如下：

mounted() {
	// 拿到表格挂载后的真实DOM
	const table = this.$refs.table
	// 拿到表格中承载数据的div元素
	const divData = table.bodyWrapper
	// 拿到元素后，对元素进行定时增加距离顶部距离，实现滚动效果(此配置为每100毫秒移动1像素)
	setInterval(() => {
		// 元素自增距离顶部1像素
		divData.scrollTop += 1
		// 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
		if (divData.clientHeight + divData.scrollTop == divData.scrollHeight) {
			// 重置table距离顶部距离
			divData.scrollTop = 0
		}
	}, 100)
}

至此实现列表滚动，测试有效！