el-table实现滚动效果

发布时间 2023-12-05 16:11:43作者: 周文豪

实现步骤:

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)
  },