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
随机推荐
- 发布jar包到远程仓库 (maven deploy)
背景: 项目有开放服务模块,现有个需求,需要把开放服务提供成一个jar包,用户可以直接对接. 流程: 1.在pom.xml文件添加distributionManagement节点,将项目打包上传到私服 ...
- rsync+inotify组合实现实时同步
首先准备两台服务器(centos7) A:192.168.75.160 B:192.168.75.161 A机器当做客户端,B机器当做服务端 rsync 安装 客户端服务器端都要安装rsync ,但是 ...
- 【SpringBoot】还不会SpringBoot项目模块分层?来这手把手教你
前言 缘由 经常看到网上很多优秀的开源项目中,代码简洁,模块分层完美.反观自己代码层级混乱,,却不知如何整理分层.此文手把手教你一步一步创建模块,左手右手一个慢动作.结合本人实际开发及个人项目中分层思 ...
- 坚叔:让科幻片的概念变成产品丨编程挑战赛 x 嘉宾分享
前言 本文基于资深创业者@坚叔在「RTE 2022 创新编程挑战赛」宣讲活动中分享内容二次整理. 嘉宾简介:陈坚(坚叔),国内二次元 AR/VR 资深创业者,国内第一批空间虚拟数字化从业人员,获得政府 ...
- 学习笔记if
- 从源码解析Go exec timeout 实现机制
1. 背景 环境:golang 1.9,drawn 测试使用golang exec 执行命令,并配置过期时间,测试脚本如下. 现象:执行脚本后,到超时时间后并为超时退出,反而阻塞住了 func Tes ...
- vite vue使用Markdown
下载插件: npm i vite-plugin-md highlight.js github-markdown-css 配置插件: import Markdown from 'vite-plugin- ...
- 存储论——经济订货批量的R实现
存储论又称库存理论,是运筹学中发展较早的分支.早在 1915 年,哈李斯(F.Harris)针对银行货币的储备问题进行了详细的研究,建立了一个确定性的存贮费用模型,并求得了最佳批量公式.1934 年威 ...
- day117:MoFang:宠物栏的功能实现&宠物道具的使用
目录 1.宠物栏的功能实现 2.宠物道具的使用 1.宠物栏的功能实现 1. 宠物的显示 2. 宠物的使用 3. 宠物的饱食度 4. 宠物的开锁 1.服务端提供显示宠物的api接口 orchard/so ...
- day11:return关键字&全局/局部变量&函数名的使用&函数的嵌套&nonlocal关键字&locals/globals
关键字:return 自定义函数的返回值,return可以把值返回到函数的调用处 1.return+六大标准数据类型,还有类和对象,函数 如果不定义return,默认返回的 ...