el-table固定表头,表格内容滚动动态展示

遇到一个需求,一个列表,后端返回所有数据,前端进行滚动展示每页三条数据,已经实现,代码如下:

js部分

change () {
 document.querySelector('.el-table__body').classList.add('marquee_top')
    setTimeout(() => {
      this.tableData.push(this.tableData[0], this.tableData[1], this.tableData[2])
      for (let i = 0; i < 3; i++) {
        this.tableData.shift()
      }
      document.querySelector('.el-table__body').classList.remove('marquee_top')
    }, 500)
},
play () {
   setInterval(this.change, 3000)
},
mounted () {
   this.play()
}

css部分

.el-table__header-wrapper
      z-index 1000
      position absolute
.el-table__body-wrapper
      height 1.2rem
      margin-top .36rem
      z-index 100
.marquee_top
      transition all 0.5s
      margin-top -1.2rem

 

posted @ 2020-06-16 10:45  王浅浅  阅读(3570)  评论(0编辑  收藏  举报