# 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 掘 金 简 书

# 3.1 演示地址

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

# 3.2 源 码

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

上次更新: 12/17/2019, 3:00:57 PM