1 前 言
1.1 预览图
image
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 后 记
感谢支持。若不足之处，欢迎大家指出，共勉。
如果觉得不错，记得 点赞，谢谢大家 😂
3.1 演示地址
https://xrkffgg.github.io/Kvue/#/UI/001
3.2 源 码
https://github.com/xrkffgg/Kvue/blob/master/src/components/uiCom/001.vue
