位置: IT常识 - 正文

ElementUI table无缝循环滚动(vue elementui table)

编辑:rootadmin
ElementUI table无缝循环滚动 恰好实习的时候遇到了这个需求,而且网上的代码有点僵硬,所以我改了改,顺手水一篇博客出来。 部分思路来源:https://blog.csdn.net/qq_38543537/article/details/122842943 但是来源的代码,在滚动到底部时会 ... ElementUI table无缝循环滚动

推荐整理分享ElementUI table无缝循环滚动(vue elementui table),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:elementui table slot,element table border,element-table,elementui table slot,elementui table slot,elementui table hover,elementui table slot,element ui table,内容如对您有帮助,希望把文章链接给更多的朋友!

恰好实习的时候遇到了这个需求,而且网上的代码有点僵硬,所以我改了改,顺手水一篇博客出来。

ElementUI table无缝循环滚动(vue elementui table)

部分思路来源:https://blog.csdn.net/qq_38543537/article/details/122842943

但是来源的代码,在滚动到底部时会有非常生硬的切换,我这里改了一些代码,让它的滚动变得流畅。

效果:

代码:

HTML:

<el-table ref="table" :data="tableData" stripe height="402"> <el-table-column prop="num" label="序号" width="80"> </el-table-column> <!-- 其它table列 --> </el-table>

JS:

data() { return { timer: null, //注意:它需要将展示的数据额外复制一份(为了无缝滚动) tableData: [ { num:1}, { num:2}, { num:3}, { num:4}, { num:5}, { num:6}, { num:7}, { num:8}, { num:9}, { num:10}, { num:1}, { num:2}, { num:3}, { num:4}, { num:5}, { num:6}, { num:7}, { num:8}, { num:9}, { num:10}, ] }; },methods: { //自动循环播放 autoCycle() { //拿到相关元素 const wrapper = this.$refs.table.bodyWrapper this.timer = setInterval(() => { // 元素自增距离顶部1像素 wrapper.scrollTop += 1 // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度) if (wrapper.clientHeight + wrapper.scrollTop == wrapper.scrollHeight) { // 重置table距离顶部距离。值=(滚动到底部时,距离顶部的大小) - 整个高度/2 wrapper.scrollTop = wrapper.scrollTop - wrapper.scrollHeight/2 } }, 50) } }
本文链接地址:https://www.jiuchutong.com/zhishi/309222.html 转载请保留说明!

上一篇:Vite + Vue2 + Vuetify2 + <script setup> + TypeScript 搭配开发项目

下一篇:二、python基本数据类型(python提供的3个基本数字类型)

  • QQ群推广中需要注意的问题(qq群推广赚钱)

    QQ群推广中需要注意的问题(qq群推广赚钱)

  • 微信运动 延迟几个小时(微信运动延迟多久)

    微信运动 延迟几个小时(微信运动延迟多久)

  • 电脑end键在哪里(华为电脑end键在哪里)

    电脑end键在哪里(华为电脑end键在哪里)

  • 黑胶和音乐包有啥不同(黑胶与音乐包的区别)

    黑胶和音乐包有啥不同(黑胶与音乐包的区别)

  • 京东卖家不发货怎么办(京东卖家不发货怎么申诉)

    京东卖家不发货怎么办(京东卖家不发货怎么申诉)

  • 删除ca证书有影响吗(把ca证书全部删除会怎么样)

    删除ca证书有影响吗(把ca证书全部删除会怎么样)

  • 为什么识别不了图片中的二维码(听歌识曲为什么识别不了)

    为什么识别不了图片中的二维码(听歌识曲为什么识别不了)

  • ip66防护等级是什么(防护等级ip66与ip65)

    ip66防护等级是什么(防护等级ip66与ip65)

  • 快手粉丝团的标志没了(快手粉丝团标签怎么改)

    快手粉丝团的标志没了(快手粉丝团标签怎么改)

  • 华为mate30怎么卸载软件(华为mate30怎么卸载桌面软件)

    华为mate30怎么卸载软件(华为mate30怎么卸载桌面软件)

  • 一个电脑上如何登录两个微信或是多个微信(一个电脑怎么两个人用)

    一个电脑上如何登录两个微信或是多个微信(一个电脑怎么两个人用)

  • 小米一共有几个语音助手(小米一共几个公司)

    小米一共有几个语音助手(小米一共几个公司)

  • 电脑后台程序怎么打开

    电脑后台程序怎么打开

  • 抬头纸一般用什么纸(抬头纸和普通纸的区别)

    抬头纸一般用什么纸(抬头纸和普通纸的区别)

  • 荣耀9x多少寸(荣耀9X多少寸的)

    荣耀9x多少寸(荣耀9X多少寸的)

  • 联系人加入黑名怎样可以恢复(联系人加入黑名单对方提示什么)

    联系人加入黑名怎样可以恢复(联系人加入黑名单对方提示什么)

  • 手机有流量却不能上网是什么原因(手机有流量却不能上网是怎么回事)

    手机有流量却不能上网是什么原因(手机有流量却不能上网是怎么回事)

  • 多表格汇总成一个表格(多表格汇总成一个表格stata)

    多表格汇总成一个表格(多表格汇总成一个表格stata)

  • 宽带测速器在线测网速多少兆宽带?(宽带测速器在线测速)

    宽带测速器在线测网速多少兆宽带?(宽带测速器在线测速)

  • 为什么网页总是弹广告 DNS被运营商劫持?
	
(为什么网页总是跳掉)

    为什么网页总是弹广告 DNS被运营商劫持? (为什么网页总是跳掉)

  • 【平常心无焦虑探讨】未来谁将被淘汰—在日常网络安全工作中使用GPT的感受(平常心下一句该怎么说)

    【平常心无焦虑探讨】未来谁将被淘汰—在日常网络安全工作中使用GPT的感受(平常心下一句该怎么说)

  • lssubsys命令  列出包含指定子系统的层次结构(ls命令的作用)

    lssubsys命令 列出包含指定子系统的层次结构(ls命令的作用)

  • python中如何创建带有文件名的临时文件?(python中如何创建字典)

    python中如何创建带有文件名的临时文件?(python中如何创建字典)

  • 不含税的金额
  • 普惠性幼儿园是非盈利幼儿园吗
  • 销售固定资产清单怎么做
  • 公司支付宝收款二维码怎么弄
  • 销售额负数怎么报税
  • 进项抵扣的金额怎么算
  • 生产车间职工工资
  • 经营性项目应收减少额怎么算
  • 银行承兑个人可以接受吗
  • 12月了还没找到工作怎么办
  • 金税三期申报代扣代缴增值税流程步骤分析
  • 增值税有差额如何调账
  • 收到供应商开具什么发票
  • 劳务人员奖金如何纳税
  • 如何使用快捷键截屏电脑
  • 收到员工水电费怎么做账
  • 购入的财务软件怎么入账
  • 固定资产入账价值计算公式
  • 应收账款转让分录
  • 电脑打字不显示文字选项
  • 差旅费增值税专用发票少报销可以吗
  • iphone11 iphone10区别
  • macOS Big Sur 11.3 开发预览版 Beta正式更新
  • 土增税税
  • 工业总产值 工业销售产值
  • h5调用海康摄像头
  • 国有企业收到财政补助如何做账
  • 超参数有哪些调优方法
  • openssl 加密套件
  • 怎么用switch语句
  • sql server评估期已过版本升级时重启失败
  • 尾款忘记支付,交易关闭怎么办
  • 支付劳务费未开具发票
  • 15个postgresql数据库实用命令分享
  • 经营成本包括五项内容
  • 企业所得税营业成本包括管理费用吗
  • 暂估费用的会计分录
  • 会计核算形式的设计具体内容包括
  • 个人转租房需要注意什么
  • 外经证预缴税款网上申报
  • 发票不按实际数量单价开 但金额一致
  • 收到运输服务发票会计分录
  • 现金冲账是什么意思
  • 小规模没交税有什么后果
  • 以前的房产证现在能过户吗
  • 民办学校学费收入
  • 违约金进项税额可否抵扣 分录
  • 其他业务支出包括哪些内容科目
  • 收入成本的确认条件
  • 盈余公积金计算方法
  • 总账的设置和登记实训报告
  • 核算管理工作
  • sql语句压缩
  • mysql 5.7.11 winx64.zip安装配置方法图文教程
  • cmd提示符基础知识
  • win102009发布日期
  • ubuntu的安装包
  • 丢失acui16.dll
  • xp系统怎么删除应用程序
  • 苹果mac安装字体怎么安装
  • win8系统磁盘清理在哪里
  • win7蓝屏代码0x0000007e
  • win8系统怎样
  • win10显示win8
  • Win8.1 32位和64位有什么区别 Win8.1 32位和64区别详细介绍
  • jQuery prototype冲突的2种解决方法(附demo示例下载)
  • js鼠标滑动特效
  • node.js怎么用
  • javascript的
  • javascript教程doc
  • js如何实现类的继承
  • js 比较
  • 归并代码
  • 宜兴税务局长郁岚
  • 委托代销清单怎么写
  • 合肥税务网几时成立的
  • 税务局绩效工作总结
  • 地方税务局工作内容
  • 张雪峰谈建筑专业
  • 抚顺交车辆购置税在哪交
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设