/**
* 表格内筒自动滚动方法
* 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...
