element table实现自动滚动
作者:
小鱼儿_逆流而上 | 来源:发表于
2021-08-12 16:54 被阅读0次
小鱼儿心语:每天多一点点的努力,不为别的,只为了日后能够多一些选择,选择云卷云舒的小日子,选择自己喜欢的人。
源码分享
直接复制就可以用哈,vue项目基础上:
首先在<el-table ref="table"></el-table>
标签上写ref="table"
// 拿到表格挂载后的真实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)
最近可视化页面中有个这样儿的需求,以上方法也是我百度出来的,只是想记录在自己的博客中,方便日后查阅,也可以帮助大家可以快速的编写代码~
本文标题:element table实现自动滚动
本文链接:https://www.haomeiwen.com/subject/kvblbltx.html
网友评论