/**
* 表格内筒自动滚动方法
* 2022年7月7日 17:15:13
* @param {Object} table el-table的ref对象
* @param {Number} speed 表格滚动速度
*/
export function tableScroll(table, speed = 30) {
// 拿到表格中承载数据的div元素
const divData = table.bodyWrapper;
let timer;
const startScroll = () => {
// 拿到元素后,对元素进行定时增加距离顶部距离,实现滚动效果(此配置为每100毫秒移动1像素)
clearInterval(timer);
timer = setInterval(() => {
// 元素自增距离顶部1像素
divData.scrollTop += 1;
// 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
if (divData.clientHeight + divData.scrollTop + 1 > divData.scrollHeight) {
// 重置table距离顶部距离
divData.scrollTop = 0;
}
}, speed);
};
startScroll();
//鼠标移入
divData.onmouseover = () => {
clearInterval(timer);
};
//鼠标移出
divData.onmouseout = () => {
clearInterval(timer);
startScroll();
};
//窗口发生改变
window.onresize = () => {
return (() => {
window.screenHeight = document.body.clientHeight;
document.clientHeight = window.screenHeight;
})();
};
}
ElementUI Table表格自动滚动
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
推荐阅读更多精彩内容
- 什么叫可变列表格? 顾名思义,就是Table的Column的数量是可变的,可能是3个、4个,或者5个。 如下图: ...
- 最近做项目的时候有个需求--需要给表格增加数据,然后数据多的情况下表格会出现滚动条,需要默认定位到表格的底部。 效...
- 小鱼儿心语:想见你的人,跋山涉水也总会来到你身边;不想见你的人,你走到他楼下他也懒得推开窗,真爱你的人,不怕麻烦也...
- 最近项目写到一个业务,首先需要展示各类分组的基本信息,然后需要点击每个分组展示该分组下子的所有具体信息 一开始我是...
- <el-table:data="tableData"border@cell-click="cellclick":c...