el-table滚动轮播的问题

```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);
```