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