Vue Element-ui 之 el-table自动滚动
首先是 div结构布局
- <div id="scrollId">//对el-table盒子设置 id 属性
- <div style="height: 100%;">
- <el-table row-class-name="tr_style" :stripe="true" :data="tableData"
- :show-header="false"
- :cell-style="{borderColor:'rgba(9, 14, 34, 1)'}"
- :header-cell-style="{borderColor:'rgba(9, 14, 34, 0.5)',fontWeight:'400',background:'#0d1d3f',color:'#fff'}">
- <el-table-column align="center" border v-for="(item,index) in cellData" :key="index" :prop="item.prop"></el-table-column>
- </el-table>
- </div>
- </div>
data定义属性:
- data() {
- return {
scrollTimer: null, // 滚动定时器- pauseTimer: null, // 暂停定时器
- scrollId: 'scrollId', // 滚动容器id
- scrollDirection: 'down' // 滚动方向 up向上 down向下
- };
},
在methods内添加以下方法
- //滚动条触发事件
- // 数据加载完成方法
- dataCompleteFun() {
- // 开启滚动
- this.autoScroll()
- },
- autoScroll() {
- if (document.getElementById("scrollId")) {
- const scrollHeight = document.getElementById("scrollId").scrollHeight
- const clientHeight = document.getElementById("scrollId").clientHeight
- const scroll = scrollHeight - clientHeight
- // 滚动长度为0
- if (scroll === 0) {
- return
- }
- }
- // 触发滚动方法
- this.scrollFun()
- // 去除点击监听
- window.document.removeEventListener('click', this.pauseScroll)
- // 重设点击监听
- window.document.addEventListener('click', this.pauseScroll, false)
- },
- pauseScroll() {
- // 定时器不为空
- if (this.scrollTimer) {
- // 清除定时器
- clearInterval(this.scrollTimer)
- this.scrollTimer = null
- // 一秒钟后重新开始定时器
- this.pauseTimer = setTimeout(() => {
- this.scrollFun()
- }, 2000)
- }
- },
- scrollFun() {
- // 如果定时器存在
- if (this.scrollTimer) {
- // 则先清除
- clearInterval(this.scrollTimer)
- this.scrollTimer = null
- }
- this.scrollTimer = setInterval(() => {
- // 获取滚动条高度
- if (document.getElementById("scrollId")) {
- const scrollHeight = document.getElementById("scrollId").scrollHeight
- const clientHeight = document.getElementById("scrollId").clientHeight
- const scroll = scrollHeight - clientHeight
- // 获取当前滚动条距离顶部高度
- const scrollTop = document.getElementById("scrollId").scrollTop
- // 向下滚动
- if (this.scrollDirection === 'down') {
// 设置滚动速度 可更改 数字 2 为你想要的长度- const temp = scrollTop + 2
- document.getElementById("scrollId").scrollTop = temp // 滚动
- // 距离顶部高度 大于等于 滚动长度
- if (scroll <= temp) {
- // 滚动到底部 停止定时器
- clearInterval(this.scrollTimer)
- this.scrollTimer = null
- // 改变方向
- this.scrollDirection = 'up'
- // 一秒后重开定时器
- setTimeout(() => {
- this.scrollFun()
- }, 1000)
- }
- // 向上滚动
- } else if (this.scrollDirection === 'up') {
- const temp = scrollTop - 2
- document.getElementById("scrollId").scrollTop = temp // 滚动
- // 距离顶部高度 小于等于 0
- if (temp <= 0) {
- // 滚动到底部 停止定时器
- clearInterval(this.scrollTimer)
- this.scrollTimer = null
- // 改变方向
- this.scrollDirection = 'down'
- // 一秒后重开定时器
- setTimeout(() => {
- this.scrollFun()
- }, 1000)
- }
- }
- }
- }, 150)
- },
在methods外,与methods同级,添加以下生命周期方法
- destroyed() {
- // 清理定时器
- clearTimeout(this.pauseTimer)
- this.pauseTimer = null
- clearInterval(this.scrollTimer)
- this.scrollTimer = null
- // 清理点击监听
- window.document.removeEventListener('click', this.pauseScroll)
- },
updated() {- this.dataCompleteFun()
- },
自此 el-table自动滚动结束
Vue Element-ui 之 el-table自动滚动的更多相关文章
- Vue+element ui table 导出到excel
需求: Vue+element UI table下的根据搜索条件导出当前所有数据 参考: https://blog.csdn.net/u010427666/article/details/792081 ...
- vue + element ui 实现实现动态渲染表格
前言:之前需要做一个页面,能够通过表名动态渲染出不同的表格,这里记录一下.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9786326.html 网站地址:我的 ...
- vue + element ui 表格自定义表头,提供线上demo
前言:工作中用到 vue+element ui 的前端框架,需要使用自定义表头,需要使用 re.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9710826.h ...
- vue+element ui 的表格列使用组件
前言:工作中用到 vue+element ui 的前端框架,有这个场景:很多表格的列有许多一样的,所以考虑将列封装为组件.转载请注明出处:https://www.cnblogs.com/yuxiaol ...
- vue+element ui 的tab 动态增减,切换时提示用户是否切换
前言:工作中用到 vue+element ui 的前端框架,动态添加 Tab,删除 Tab,切换 Tab 时提示用户是否切换等,发现 element ui 有一个 bug,这里记录一下如何实现.转载 ...
- vue + element ui 阻止表单输入框回车刷新页面
问题 在 vue+element ui 中只有一个输入框(el-input)的情况下,回车会提交表单. 解决方案 在 el-form 上加上 @submit.native.prevent 这个则会阻止 ...
- vue+element ui 的时间控件选择 年月日时分
前言:工作中用到 vue+element ui 的前端框架,需要选择年月日时分,但element ui官网demo有没有,所以记录一下.转载请注明出处:https://www.cnblogs.com/ ...
- Vue+Element UI 实现视频上传
一.前言 项目中需要提供一个视频介绍,使用户能够快速.方便的了解如何使用产品以及注意事项. 前台使用Vue+Element UI中的el-upload组件实现视频上传及进度条展示,后台提供视频上传AP ...
- 分享一个自搭的框架,使用Spring boot+Vue+Element UI
废弃,新的:https://www.cnblogs.com/hackyo/p/10453243.html 特点:前后端分离,可遵循restful 框架:后端使用Spring boot,整合了aop.a ...
- Vue + Element UI 实现权限管理系统
Vue + Element UI 实现权限管理系统 前端篇(一):搭建开发环境 https://www.cnblogs.com/xifengxiaoma/p/9533018.html
随机推荐
- 钉钉获取第三方token时提示签名时间戳参数超时的处理方法
今天在更新平台功能时,碰到一个问题,从钉钉跳转到平台,始终不能成功.查看日志发现,出现了 签名时间戳参数超时 的错误. 想着没有动过相对应的代码,应该不是代码的问题. 查询官方文档,没有给出明确的答复 ...
- 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, ...
- Javaweb学习笔记第十三弹--JSP和Servlet
JSP = HTML + Java 目的是为了简化开发,其本质是一个Servlet 快速入门 步骤: 1.导包 2.创建文件 3.编写程序 得到结果: JSP脚本(用于在JSP页面里面定义Java代码 ...
- ASP.NET Core - 选型系统之选型配置
1. 选项 前面讲完了.NET Core 下的配置系统,我们可以通过 IConfiguration 服务从各种来源的配置中读取到配置信息,但是每次要用的时候都通过 Iconfiguration 读取配 ...
- 【WEB UI自动化】Selenium爬取用户的知乎回答时遇到10002:请求参数异常,请升级客户端后重试
这里分享一个低配版知乎爬虫,利用了Selenium模块 爬取的过程中遇到了10002:请求参数异常,请升级客户端后重试,调用知乎某用户的回答API返回的HTTP状态码是403 Forbidden 之后 ...
- 万字血书React—走近React
配置开发环境 脚手架工具create-react-app 储备知识:终端或命令行.代码编辑器 React官方中文文档 create-react-app 其是基于Node的快速搭建React项目的脚手架 ...
- k8s 1.24 1.25 集群使用docker作为容器
Kubernetes 1.24 1.25 集群使用docker作为容器 背景 在新版本Kubernetes环境(1.24以及以上版本)下官方不在支持docker作为容器运行时了,若要继续使用docke ...
- [数据库]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 ...
- C++ 标准库 sort() / stable_sort() / partial_sort() 对比
C++ STL标准库中提供了多个用于排序的Sort函数,常用的包括有sort() / stable_sort() / partial_sort(),具体的函数用法如下表所示: 函数 用法 std::s ...
- 从零开始配置深度学习环境:CUDA+Anaconda+Pytorch+TensorFlow
本文适用于电脑有GPU(显卡)的同学,没有的话直接安装cpu版是简单的.CUDA是系统调用GPU所必须的,所以教程从安装CUDA开始. CUDA安装 CUDA是加速深度学习计算的工具,诞生于NVIDI ...