本文已经参加[新人创作礼]活动,一起开启掘金创作之路
一、背景
工作中需要实现表格数据循环滚动优化,之前的滚动是通过删除表格的第一行数据并添加到最后一行来实现数据滚动,缺点是滚动效果没有达到预期(温和的滚动),找了很多资料,发现elementui中的表格需要实现无限滚动并不需要下载什么插件,elementui中的table表格自带的属性:
cell-mouse-enter 当单元格 hover 进入时会触发该事件
cell-mouse-leave 当单元格 hover 退出时会触发该事件
二、实现的效果视频链接
三、实现方法
首先给表格绑定鼠标事件 cell-mouse-enter 和 cell-mouse-leave (实现鼠标进入和出去的时候数据是否滚动)(这个鼠标进入的需求也可以不写,看自己需求,这里是需要鼠标进入的停止滚动,移出的时候开始滚动)
实现滚动的主要思路是通过 $ref 拿到 dom 元素(element的表格可以设置ref属性),dom元素中有clientHeight属性和scrollTop属性,在定时器中通过设置着两个属性来实现表格数据匀速滚动,同时设置一个固定值来判断是否需要调接口重新获取数据来实现无限滚动,同时需要清空定时器,不然会有问题。
divData.scrollTop += 1 来设置数据滚动的速度(1,2,3,4.....)
最后附上代码截图: