```js
在以往的展示数据类的项目,少不了el-table滚动轮播,这种滚动轮播怎么做呢?
```
注:我只介绍一种不喜勿喷,如果有其他实现方式可以评论区讨论一下
# 单个el-table
```js
var isScroll = true // 也可以定义到data里
this.$nextTick(() => {
let div = document.getElementsByClassName('el-table__body-wrapper')[0]
// div.style.height = '110px'
div.addEventListener('mouseenter', () => {
isScroll = false
})
div.addEventListener('mouseleave', () => {
isScroll = true
})
let t = document.getElementsByClassName('el-table__body')[0]
this.timer = setInterval(() =>{
if(isScroll) {
let data = this.tableData[0]
setTimeout(() => {
this.tableData.push(data)
t.style.transition = 'all .5s'
t.style.marginTop = '-41px'
}, 500)
setTimeout(() =>{
this.tableData.splice(0,1)
t.style.transition = 'all 0s ease 0s'
t.style.marginTop = '0'
}, 1000)
}
}, 2500)
})
```
以上代码会在多个el-table时影响滚动的效果,或者说在与el-tabs配合使用时会效果不太好,具体是在第二个el-table_body或者非第一个el-table_body获取不到对应的el-table_body,所以就应该使用以下代码:
用获取数组元素的方法来获取el-table_body
```js
function scorllTable(index){
var isScroll = true // 也可以定义到data里
this.$nextTick(() => {
let div = document.getElementsByClassName('el-table__body-wrapper')[0]
// div.style.height = '110px'
div.addEventListener('mouseenter', () => {
isScroll = false
})
div.addEventListener('mouseleave', () => {
isScroll = true
})
let t = document.getElementsByClassName('el-table__body')[index]
this.timer = setInterval(() =>{
if(isScroll) {
let data = this.tableData[0]
setTimeout(() => {
this.tableData.push(data)
t.style.transition = 'all .5s'
t.style.marginTop = '-41px'
}, 500)
setTimeout(() =>{
this.tableData.splice(0,1)
t.style.transition = 'all 0s ease 0s'
t.style.marginTop = '0'
}, 1000)
}
}, 2500)
})
}
scorllTable(index)
```
另外有兴趣的可以试试这一种方案
```js
const table = this.$refs.reportTable;
// 拿到表格中承载数据的div元素
const divData = table.bodyWrapper;
console.log(divData,'--------------');
// 拿到元素后,对元素进行定时增加距离顶部距离,实现滚动效果(此配置为每100毫秒移动1像素)
this.timer = setInterval(() => {
// 元素自增距离顶部1像素
divData.scrollTop += 1;
// 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
if (
divData.clientHeight + divData.scrollTop >=
divData.scrollHeight - 1
) {
// 重置table距离顶部距离
divData.scrollTop = 0;
}
}, 50);
```