vue element-ui table 实现自动滚动效果
2024-09-18 15:32:58
<el-table
:data="tableData"
stripe
class="swiper-page-table"
ref="table"
height="100%"
>
<el-table-column type="index" label="序号" width="50"> </el-table-column>
<el-table-column prop="date" label="时间" width="120">
</el-table-column>
<el-table-column prop="name" label="姓名" width="140">
</el-table-column>
<el-table-column prop="address" label="地址" min-width="220">
</el-table-column>
</el-table> mounted() {
this.tableScroll()
}, methods: {
tableScroll(){
const table = this.$refs.table;
// 拿到表格中承载数据的div元素
const divData = table.bodyWrapper;
// 拿到元素后,对元素进行定时增加距离顶部距离,实现滚动效果(此配置为每100毫秒移动1像素)
setInterval(() => {
// 元素自增距离顶部1像素
divData.scrollTop += 1;
// 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
if (divData.clientHeight + divData.scrollTop == divData.scrollHeight) {
// 重置table距离顶部距离
divData.scrollTop = 0;
}
}, 30); // 滚动速度
}
} <style lang="scss" scoped>
.app-container {
// 去除滚动的滚动条
::v-deep .el-table--scrollable-y .el-table__body-wrapper{
overflow-y: hidden;
}
}
</style>
亲测可用~
最新文章
- [转]基于AWS的自动化部署实践
- 【练习】oracel获取当前session的id方法
- 2016 网易校招内推C/C++第二场8.6
- jQuery 根据JSON数据动态生成表格
- Redis Cluster架构和设计机制简单介绍
- C#核心语法
- Threejs 的场景查看 - 几个交互事件库助你方便查看场景
- centos安装svn
- 递归的二叉查找树Java实现
- 2018-2019-2 20165234 《网络对抗技术》 Exp2 后门原理与实践
- 初识 Proxysql
- 【MM系列】SAP里批量设置采购信息记录删除标记
- [WC2018]州区划分(FWT)
- JNI和NDK基础
- Android使用Fragment实现TabHost效果
- Django + Uwsgi + Nginx 实现生产环境 项目部署
- 使用Java语言开发微信公众平台(三)——被关注回复与关键词回复
- Django---路由如何配置
- Android中MD5加密
- C#监控文件夹变化
热门文章
- 【每日一题】【比较中右,内部比较中右,注意边界带>;=】2021年11月2日-搜索旋转排序数组-211102/220211
- 《HTTP权威指南》– 8.网关、Web机器人
- pycharm恢复删除文档与查询修改前数据
- 周结之json补充、正则re模块、hashlib模块、logging模块
- element-ui中table组件的表格嵌套Select,table中使用select
- CVE-2020-1938与CVE-2020-13935漏洞复现
- Flask初步认识
- 分享一般.net core的web项目发布到服务器环境的处理步骤(来自本人实践笔记)
- [机器学习] sklearn支持向量机
- Jupyter Notebook入门指南