首先是 div结构布局

  1. <div id="scrollId">//对el-table盒子设置 id 属性
  2. <div style="height: 100%;">
  3. <el-table row-class-name="tr_style" :stripe="true" :data="tableData"
  4. :show-header="false"
  5. :cell-style="{borderColor:'rgba(9, 14, 34, 1)'}"
  6. :header-cell-style="{borderColor:'rgba(9, 14, 34, 0.5)',fontWeight:'400',background:'#0d1d3f',color:'#fff'}">
  7.   <el-table-column align="center" border v-for="(item,index) in cellData" :key="index" :prop="item.prop"></el-table-column>
  8. </el-table>
  9. </div>
  10. </div>

data定义属性:

  1.     data() {
  2. return {
    scrollTimer: null, // 滚动定时器
  3. pauseTimer: null, // 暂停定时器
  4. scrollId: 'scrollId', // 滚动容器id
  5. scrollDirection: 'down' // 滚动方向 up向上 down向下
  6. };
    },

在methods内添加以下方法

  1.        //滚动条触发事件
  2. // 数据加载完成方法
  3. dataCompleteFun() {
  4. // 开启滚动
  5. this.autoScroll()
  6. },
  7. autoScroll() {
  8. if (document.getElementById("scrollId")) {
  9. const scrollHeight = document.getElementById("scrollId").scrollHeight
  10. const clientHeight = document.getElementById("scrollId").clientHeight
  11. const scroll = scrollHeight - clientHeight
  12. // 滚动长度为0
  13. if (scroll === 0) {
  14. return
  15. }
  16. }
  17. // 触发滚动方法
  18. this.scrollFun()
  19. // 去除点击监听
  20. window.document.removeEventListener('click', this.pauseScroll)
  21. // 重设点击监听
  22. window.document.addEventListener('click', this.pauseScroll, false)
  23.  
  24. },
  25. pauseScroll() {
  26. // 定时器不为空
  27. if (this.scrollTimer) {
  28. // 清除定时器
  29. clearInterval(this.scrollTimer)
  30. this.scrollTimer = null
  31. // 一秒钟后重新开始定时器
  32. this.pauseTimer = setTimeout(() => {
  33. this.scrollFun()
  34. }, 2000)
  35. }
  36. },
  37. scrollFun() {
  38. // 如果定时器存在
  39. if (this.scrollTimer) {
  40. // 则先清除
  41. clearInterval(this.scrollTimer)
  42. this.scrollTimer = null
  43. }
  44. this.scrollTimer = setInterval(() => {
  45. // 获取滚动条高度
  46. if (document.getElementById("scrollId")) {
  47. const scrollHeight = document.getElementById("scrollId").scrollHeight
  48. const clientHeight = document.getElementById("scrollId").clientHeight
  49. const scroll = scrollHeight - clientHeight
  50. // 获取当前滚动条距离顶部高度
  51. const scrollTop = document.getElementById("scrollId").scrollTop
  52. // 向下滚动
  53. if (this.scrollDirection === 'down') {
                    // 设置滚动速度 可更改 数字 2 为你想要的长度
  54. const temp = scrollTop + 2
  55. document.getElementById("scrollId").scrollTop = temp // 滚动
  56. // 距离顶部高度 大于等于 滚动长度
  57. if (scroll <= temp) {
  58. // 滚动到底部 停止定时器
  59. clearInterval(this.scrollTimer)
  60. this.scrollTimer = null
  61. // 改变方向
  62. this.scrollDirection = 'up'
  63. // 一秒后重开定时器
  64. setTimeout(() => {
  65. this.scrollFun()
  66. }, 1000)
  67. }
  68. // 向上滚动
  69. } else if (this.scrollDirection === 'up') {
  70. const temp = scrollTop - 2
  71. document.getElementById("scrollId").scrollTop = temp // 滚动
  72. // 距离顶部高度 小于等于 0
  73. if (temp <= 0) {
  74. // 滚动到底部 停止定时器
  75. clearInterval(this.scrollTimer)
  76. this.scrollTimer = null
  77. // 改变方向
  78. this.scrollDirection = 'down'
  79. // 一秒后重开定时器
  80. setTimeout(() => {
  81. this.scrollFun()
  82. }, 1000)
  83. }
  84. }
  85. }
  86. }, 150)
  87. },

在methods外,与methods同级,添加以下生命周期方法

  1. destroyed() {
  2. // 清理定时器
  3. clearTimeout(this.pauseTimer)
  4. this.pauseTimer = null
  5. clearInterval(this.scrollTimer)
  6. this.scrollTimer = null
  7. // 清理点击监听
  8. window.document.removeEventListener('click', this.pauseScroll)
  9. },
    updated() {
  10. this.dataCompleteFun()
  11. },

自此 el-table自动滚动结束

Vue Element-ui 之 el-table自动滚动的更多相关文章

  1. Vue+element ui table 导出到excel

    需求: Vue+element UI table下的根据搜索条件导出当前所有数据 参考: https://blog.csdn.net/u010427666/article/details/792081 ...

  2. vue + element ui 实现实现动态渲染表格

    前言:之前需要做一个页面,能够通过表名动态渲染出不同的表格,这里记录一下.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9786326.html 网站地址:我的 ...

  3. vue + element ui 表格自定义表头,提供线上demo

    前言:工作中用到 vue+element ui 的前端框架,需要使用自定义表头,需要使用 re.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9710826.h ...

  4. vue+element ui 的表格列使用组件

    前言:工作中用到 vue+element ui 的前端框架,有这个场景:很多表格的列有许多一样的,所以考虑将列封装为组件.转载请注明出处:https://www.cnblogs.com/yuxiaol ...

  5. vue+element ui 的tab 动态增减,切换时提示用户是否切换

    前言:工作中用到 vue+element ui 的前端框架,动态添加 Tab,删除 Tab,切换 Tab 时提示用户是否切换等,发现 element ui  有一个 bug,这里记录一下如何实现.转载 ...

  6. vue + element ui 阻止表单输入框回车刷新页面

    问题 在 vue+element ui 中只有一个输入框(el-input)的情况下,回车会提交表单. 解决方案 在 el-form 上加上 @submit.native.prevent 这个则会阻止 ...

  7. vue+element ui 的时间控件选择 年月日时分

    前言:工作中用到 vue+element ui 的前端框架,需要选择年月日时分,但element ui官网demo有没有,所以记录一下.转载请注明出处:https://www.cnblogs.com/ ...

  8. Vue+Element UI 实现视频上传

    一.前言 项目中需要提供一个视频介绍,使用户能够快速.方便的了解如何使用产品以及注意事项. 前台使用Vue+Element UI中的el-upload组件实现视频上传及进度条展示,后台提供视频上传AP ...

  9. 分享一个自搭的框架,使用Spring boot+Vue+Element UI

    废弃,新的:https://www.cnblogs.com/hackyo/p/10453243.html 特点:前后端分离,可遵循restful 框架:后端使用Spring boot,整合了aop.a ...

  10. Vue + Element UI 实现权限管理系统

    Vue + Element UI 实现权限管理系统 前端篇(一):搭建开发环境 https://www.cnblogs.com/xifengxiaoma/p/9533018.html

随机推荐

  1. 钉钉获取第三方token时提示签名时间戳参数超时的处理方法

    今天在更新平台功能时,碰到一个问题,从钉钉跳转到平台,始终不能成功.查看日志发现,出现了 签名时间戳参数超时 的错误. 想着没有动过相对应的代码,应该不是代码的问题. 查询官方文档,没有给出明确的答复 ...

  2. IndexError: only integers, slices (`:`), ellipsis (`...`), numpy.newaxis (`None`) and integer or boolean arrays are valid indices

    代码: cate_ids=np.unique(gt_box_array[:,-1]) for tmp_cateid in cate_ids:       conf_matrix[tmp_cateid, ...

  3. Javaweb学习笔记第十三弹--JSP和Servlet

    JSP = HTML + Java 目的是为了简化开发,其本质是一个Servlet 快速入门 步骤: 1.导包 2.创建文件 3.编写程序 得到结果: JSP脚本(用于在JSP页面里面定义Java代码 ...

  4. ASP.NET Core - 选型系统之选型配置

    1. 选项 前面讲完了.NET Core 下的配置系统,我们可以通过 IConfiguration 服务从各种来源的配置中读取到配置信息,但是每次要用的时候都通过 Iconfiguration 读取配 ...

  5. 【WEB UI自动化】Selenium爬取用户的知乎回答时遇到10002:请求参数异常,请升级客户端后重试

    这里分享一个低配版知乎爬虫,利用了Selenium模块 爬取的过程中遇到了10002:请求参数异常,请升级客户端后重试,调用知乎某用户的回答API返回的HTTP状态码是403 Forbidden 之后 ...

  6. 万字血书React—走近React

    配置开发环境 脚手架工具create-react-app 储备知识:终端或命令行.代码编辑器 React官方中文文档 create-react-app 其是基于Node的快速搭建React项目的脚手架 ...

  7. ​k8s 1.24 1.25 集群使用docker作为容器

    Kubernetes 1.24 1.25 集群使用docker作为容器 背景 在新版本Kubernetes环境(1.24以及以上版本)下官方不在支持docker作为容器运行时了,若要继续使用docke ...

  8. [数据库]MySQL解决:MySQLNonTransientConnectionException: Could not create connection to database server.【待完善】

    场景复现 mysql数据库 5.7.24 jdbc driver: mysql-connector-java: 5.1.33 jdbc 配置: + jdbc.url + driverName: Tom ...

  9. C++ 标准库 sort() / stable_sort() / partial_sort() 对比

    C++ STL标准库中提供了多个用于排序的Sort函数,常用的包括有sort() / stable_sort() / partial_sort(),具体的函数用法如下表所示: 函数 用法 std::s ...

  10. 从零开始配置深度学习环境:CUDA+Anaconda+Pytorch+TensorFlow

    本文适用于电脑有GPU(显卡)的同学,没有的话直接安装cpu版是简单的.CUDA是系统调用GPU所必须的,所以教程从安装CUDA开始. CUDA安装 CUDA是加速深度学习计算的工具,诞生于NVIDI ...