11. Element-ui 简单实现表格滚动（附演示及源码）

1 前 言

1.1 预览图

1.2 介 绍

功能很简单，不确定方法有没有问题，所以写出来让大家来检查检查

1.3 使用技术

• Vue
• Element-ui

2 实 现

2.1 查看UI

这里是直接使用 UI 里的表格组件，F12 查看

可以明显看出：

• 表格头 class="el-table__header-wrapper"
• 表格体 class="el-table__body-wrapper"
• 表格高度默认 48px

2.2 滚 动

我们想要的效果是向下滚动，即向下移动 48px

//  获取表格体
let t = document.getElementsByClassName('el-table__body-wrapper')
setTimeout(() =>{
    t[0].style.transition = 'all .5s'
    t[0].style.marginTop = '48px'
},500)
setTimeout(() =>{
    //  加入数据
    t[0].style.transition = 'all 0s ease 0s'
    t[0].style.marginTop = '0'
},1000)

• 设定动作执行时间为 500ms
• 完成动作后，恢复表格样式

2.3 操作

操作	功能
开始	每隔一秒触发向下滚动的动作
暂停	清除计时器
重置	清理计时器，清理数据

3 后 记

感谢支持。若不足之处，欢迎大家指出，共勉。

如果觉得不错，记得 点赞，谢谢大家 😂

欢迎关注 我的： GitHub (opens new window) 掘 金 (opens new window) 简 书 (opens new window)

3.1 演示地址

https://xrkffgg.github.io/Kvue/#/UI/001

3.2 源 码

https://github.com/xrkffgg/Kvue/blob/master/src/components/uiCom/001.vue