首页 > 其他分享 >el-table实现滚动效果

el-table实现滚动效果

时间:2023-12-05 16:12:38浏览次数:28  
标签:el 滚动 translateY transform 数组 table tableData

实现步骤:

1、方法

methods: {
    scroll(){
      let el = document.querySelector('.el-table__body-wrapper')
      el.addClassName = 'anim'
       setTimeout(()=>{ 
              // console.log(this.items[0])
              this.tableData.push(this.tableData[0]);  // 将数组的第一个元素添加到数组的
              this.tableData.shift();    //删除数组的第一个元素
       },2000)
    }
  }
}

2、样式

<style scoped>
.anim{
  animation: mymove 1s linear;
}
 
@keyframes mymove
{
from {
  transform: translateY(0px) ;
}
to {
  transform: translateY(-20px) ;
}
}
</style>

3、调用方法:

mounted (){
    setInterval(this.scroll,2000)
  },

 

标签:el,滚动,translateY,transform,数组,table,tableData
From: https://www.cnblogs.com/zwh0910/p/17877518.html

相关文章

  • perl:mysql binlog iud (insert、update、delete)分析 小脚本:实用程序
    1#!/usr/bin/perl2#utf-834usestrict;5usePOSIX;6useTime::HiResqw/sleeptime/;78$|=1;910my$line='#-----------------------------------------------------------------------';11my$debug=0;1213##------------......
  • Prometheus Dashboard for elasticsearch exporter
    prometheus-community/elasticsearch_exporter:ElasticsearchstatsexporterforPrometheusReleases·prometheus-community/elasticsearch_exporterDashboards|GrafanaLabsElasticsearchExporterQuickstartandDashboard|GrafanaLabsPrometheusOSS|Elast......
  • PostgreSQL: select for update实战
    场景需要获取用户申请的流水号,其值记录在number_of_form表中。但当多个用户同时申请时,会出现单号重复的情况,现在需要保证单据号码的一致性解决方案以我搜寻来看,大体有两种做法。悲观锁:总是假设最坏的情况,也就是每次拿数据的时候,都认为别人会修改,所以每次拿数据,都会对符合条......
  • Excel判断日期是否是工作日的实现(排除节假日,加上补班日)
     实现思路:工作日= 【周一到周五(排除节假日)或者补班日】公式编写:1.周一到周五判断WEEKDAY(A2,2) 获取该日期是星期几(返回:1-7),那么周一到周五就是<62.非节假日判断COUNTIF($G$2:$G$398,A2)=0统计该日期在指定区域$G$2:$G$398中出现的次数,非节假日就是未出现,出现......
  • 隐藏滚动条的方法
    使用iframe的页面通常会出现双滚动条,还有一些不希望出现滚动条的页面也出现了滚动条,这个时候希望隐藏滚动条。一个直接的思路,是调整滚动容器的宽高和overflow,使得滚动条消失。但是往往是隐藏了滚动条,使得内容也被截断,不能达到效果。换个思路,隐藏滚动条,只是让滚动条看不见,不是去......
  • IntelliJ IDEA 2023.2新特性详解第三弹!Docker、Kubernetes等支持!
    9Docker在Docker镜像层内预览文件现在可以在Services(服务)工具窗口中轻松访问和预览Docker镜像层的内容。从列表选择镜像,选择Showlayers(显示层),然后点击Analyzeimageformoreinformation(分析镜像以获得更多信息)。这将打开层中存储的文件列表,你可以右键点击文件,然后......
  • IntelliJ IDEA 2023 又出新版本啦!最新IDEA激活码安排上「永久激活,长期更新,亲测有效」
    IntelliJIDEA2023又出新版本啦IntelliJIDEA2023又出新版本啦!上一个版本还没用熟练,2023.2.5版本就出来了。还好是小版本发布,使用上没有太多影响。IntelliJIDEA是一款功能强大的集成开发环境,被广泛应用于Java开发中。为了充分发挥其优势,您需要激活码来解锁全部功能。本文将......
  • Unevictable LRU Infrastructure (翻译 by chatgpt)
    原文:https://www.kernel.org/doc/html/latest/mm/unevictable-lru.htmlIntroductionThisdocumentdescribestheLinuxmemorymanager's"UnevictableLRU"infrastructureandtheuseofthistomanageseveraltypesof"unevictable"folios......
  • 三-select模型
    select模型是对简单C/S模型的优化,他解决了accept函数阻塞等待连接的问题。并且允许应用程序同时监视多个套接字,从而实现简单的并发请求。通过调用select函数确认一个或多个套接字当前的状态,并根据当前状态进行相应操作。在select模型模型中,select函数是最关键的。select模型工作......
  • Windows 项目的 CMakeLists 编写
    前言:项目一直是以.sln解决方案打开和处理的,上传到github也是需要将sln文件包括到项目里,不太优雅(虽然方便),毕竟现在开源项目基本都是使用CMake做跨平台编译因为项目是以Windows编译为主,就只写了CMakeLists中的Windows的部分,后续如果要跨平台的话,可以在此基础上拓展......