如何在el-table表格中实现轮播表，每一列数据上向自动滚动？
一、思路：我们只需要获取到表格的数据数组，然后设置一个定时器即可，每秒将第一个元素添加至数组末尾，在将第一位元素删除。
二、代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="jquery.min.js"></script>
<script src="../Echarts/vue.min.js"></script>
<script src="../Echarts/element.js"></script>
<link rel="stylesheet" type="text/css" href="css/element.css" />
</head>
<body>
<div id="box">
<el-table :data="tableData" style="width: 100%;height:300px;">
<el-table-column prop="date" label="日期" width="180">
</el-table-column>
<!--<el-table-column prop="name" label="姓名" width="180">-->
</el-table-column>
<el-table-column prop="address" label="地址">
</el-table-column>
</div>
<script>
new Vue({
el: '#box',
data: {
// animate: false,
tableData: [{
date: '1',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '3',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
date: '4',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}, {
date: '5',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}, {
date: '6',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}, {
date: '7',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}, {
date: '8',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}, {
date: '9',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}, {
date: '10',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}, {
date: '11',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}, {
date: '12',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}]
},
created() {
setInterval(this.scroll, 1000)
},
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(); //删除数组的第一个元素
},1000)
}
}
})
</script>
<style scoped>
.anim{
animation: mymove 1s linear;
}
@keyframes mymove
{
from {
transform: translateY(0px) ;
}
to {
transform: translateY(-20px) ;
}
}
</style>
</body>
</html>
这样就ok了，但是存在缺陷，就是轮播不是缓缓的，是突然的向上，但是总归是实现了循环轮播！如果想无缝缓缓的轮播，那就比较麻烦了，网上很多方法都试过，放在el-table上感觉有点问题，如果是普通的table就成功了！