位置: 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个基本数字类型)

  • oppok9s怎么设置双击亮屏(oppok9s怎么设置自定义动态壁纸)

    oppok9s怎么设置双击亮屏(oppok9s怎么设置自定义动态壁纸)

  • 知乎如何才能降低问题被搜索到呢(知乎怎么降热度)

    知乎如何才能降低问题被搜索到呢(知乎怎么降热度)

  • 医鹿抢九价怎么快速填信息(医鹿抢九价可以别人帮忙抢吗)

    医鹿抢九价怎么快速填信息(医鹿抢九价可以别人帮忙抢吗)

  • 抖音刷点赞会被限流吗

    抖音刷点赞会被限流吗

  • 电脑主机显示器接口(电脑主机显示器无线连接)

    电脑主机显示器接口(电脑主机显示器无线连接)

  • applewatch5防水性能(apple watch series 5防水怎么样)

    applewatch5防水性能(apple watch series 5防水怎么样)

  • 苹果微信语音不能录屏(苹果微信语音不提示怎么回事)

    苹果微信语音不能录屏(苹果微信语音不提示怎么回事)

  • b365主板配9700k影响性能吗(b365主板配9700合适吗)

    b365主板配9700k影响性能吗(b365主板配9700合适吗)

  • 快手的扫一扫在哪里(快手的扫一扫在哪个位置)

    快手的扫一扫在哪里(快手的扫一扫在哪个位置)

  • 魅族17没有光学防抖吗(魅族17pro没有光学防抖影响大吗)

    魅族17没有光学防抖吗(魅族17pro没有光学防抖影响大吗)

  • qq如何查看密码是什么(qq如何修改密码)

    qq如何查看密码是什么(qq如何修改密码)

  • 苹果7闪退发烫是什么原因(苹果7闪退发热)

    苹果7闪退发烫是什么原因(苹果7闪退发热)

  • 7p屏幕分辨率(iphone7plus 分辨率)

    7p屏幕分辨率(iphone7plus 分辨率)

  • i5 9400f相当于几代i7(i5 9400f相当于什么水平)

    i5 9400f相当于几代i7(i5 9400f相当于什么水平)

  • vivo下载的视频在哪里找(vivo下载的视频在哪个文件夹)

    vivo下载的视频在哪里找(vivo下载的视频在哪个文件夹)

  • 无法从dfu模式切换至恢复模式怎么解决(dfu模式怎么退出)

    无法从dfu模式切换至恢复模式怎么解决(dfu模式怎么退出)

  • 苹果8强制重启方法(苹果8强制重启后还是白苹果)

    苹果8强制重启方法(苹果8强制重启后还是白苹果)

  • int main 的作用是什么(int(main))

    int main 的作用是什么(int(main))

  • 小米9最厚处厚度是多少(小米九厚度)

    小米9最厚处厚度是多少(小米九厚度)

  • vivox27“幻彩夏日”什么时候上市(vivox27)

    vivox27“幻彩夏日”什么时候上市(vivox27)

  • 华为手机助手在哪(华为手机助手在苹果笔记本电脑不能用?)

    华为手机助手在哪(华为手机助手在苹果笔记本电脑不能用?)

  • 微信长文字怎么不折叠(微信长文字怎么折叠转发送)

    微信长文字怎么不折叠(微信长文字怎么折叠转发送)

  • 手机网上购物怎样操作(手机网上咋购物)

    手机网上购物怎样操作(手机网上咋购物)

  • 原生JS实现FlappyBird游戏 超详细解析 快来做一个自己玩吧(原生js实现promise.all)

    原生JS实现FlappyBird游戏 超详细解析 快来做一个自己玩吧(原生js实现promise.all)

  • 付款方和发票抬头不一致如何账务处理
  • 系统集成 税点
  • 简易计征开什么发票
  • 待报解预算收入付款怎么做账
  • 印花税账务处理
  • 非正常损失进项转出额如何计算
  • 现金日记账支出是记借还是贷
  • 企业间贴现手续怎么办理
  • 退休人员返聘工资交个人所得税标准
  • 为什么利润表的财务费用与利息费用逻辑不对
  • 企业允许加计扣除的研发费用主要包括哪些?
  • 混合销售行为如何缴纳消费税
  • 企业季度所得税资产总额怎么填
  • 电话费补贴属于免税收入吗
  • 公司员工餐费会计分录
  • 销售折让怎么处理
  • 现金净流量正常值
  • 购买活动赠品会计分录
  • 企业收入不进公账怎样做账?
  • 企业所得税法如何确认应税收入
  • 固定资产可以一次折旧完吗
  • 开具的电子发票需要打印出来做账吗
  • 手动滑屏怎么操作
  • uefi启动u盘安装win10系统的详细流程
  • macos big sur将安装在macintosh hd
  • 企业免征增值税证明怎么打印
  • 设备维保费计算标准
  • 笔记本win10玩红警怎么全屏
  • mpd linux
  • 企业常用的消毒措施有
  • 房地产开发公式
  • pytorch_lightning.utilities.exceptions.MisconfigurationException: You requested GPUs: [1] But...
  • laravel 5.3中自定义加密服务的方案详解
  • 融资租赁的固定资产所有权归谁
  • php环境搭建apache
  • 购进的产品样品怎么入账
  • 小规模纳税人采购零配件税率
  • 因果推断的常用标准
  • es6 promise是什么
  • usermod修改密码
  • php的运算符主要包括哪些?
  • 旅行社开的发票怎么记账?
  • 红冲费用如何处理
  • 当月确认收入可以下月确认成本吗
  • 瀑布流样式
  • python time.ctime()如何做时间加减法
  • 金蝶固定资产折旧调整
  • 固定资产报废处置的请示
  • 销售折扣购物卡对公司财务的好处
  • 可供出售金融资产是流动资产吗
  • 小规模企业税收优惠政策2022
  • 财政补助收入属于资产类还是负债类
  • 研发费用辅助账模板 税务局
  • 函证核对法是什么
  • 哪些单位需要缴纳残疾人保障金
  • 月底计提工资的会计处理
  • 期末结账账务处理
  • Linux下Mysql5.7.19卸载方法
  • sql数据库批量添加数据
  • mysql忽略大小写设置
  • xp系统打开浏览器没反应
  • smsvchost.exe是什么文件 电脑中Svchost.exe病毒解决办法
  • win 注册表
  • 命令提示符操作方法
  • 如何解决心脏供血不足
  • rundll32找不到文件
  • centos安装虚拟机教程
  • win7升级win10系统版本软件还有吗
  • windows8怎么去除广告
  • linux gtk+
  • win10 windows更新清理删不掉
  • 微信公众号javascript
  • python程序的开发过程
  • shell 递归
  • c#中init
  • js 堆排序
  • 2021广东农村医保多少钱一年
  • 河北国家税务局官网站
  • 税务社保费是什么意思
  • 威科先行个人一年费用
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设