同一页面有多个滚动的table表格，鼠标滑入表格暂停不生效

<div class="content-box">
    <ScrollTable :id=“scrollTable1" :data="abnormal.data"></ScrollTable>
</div>
<div class="content-box">
    <ScrollTable :id=“scrollTable2" :data="warnings.data"></ScrollTable>
</div>
data () {
    return {
        scrollTable1: 'scrollTable1',
        scrollTable2: 'scrollTable2'
    }
}

<template>
  <i-table ref='table' :id="id" :data="data"></i-table>
</template>
<script>
export default {
  props: {
    id: {
      type: String,
      default () {
        return null
      }
    },
    data: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data () {
    return {
      timer: null
    }
  },
  mounted () {
    this.scrollTable()
  },
  methods: {
    // 滚动的方法
    scrollTable () {
      let _this = this
      // 通过ID和类名去锁定是哪个table滑动，注意table是一个数组，当鼠标进入或者移出时取数组的第0项
      let table = document.getElementById(this.id).getElementsByClassName('ivu-table-body')
      table.scrollTop = 0
      table.innerHTML += table.innerHTML
      setTimeout(play(), 500)
      // 鼠标进入时使其暂停，即取消定时器
      table[0].onmouseover = function () {
        clearInterval(_this.timer)
      }
      // 鼠标移出时使其继续，即取再次调用滚动的方法
      table[0].onmouseout = function () {
        play()
      }
      // 滚动的方法
      function play () {
        _this.timer = setInterval(function () {
          table[0].scrollTop++
          if (table[0].scrollTop >= (table[0].scrollHeight - table[0].offsetHeight - 1)) {
            table[0].scrollTop = 0
          }
        }, 100)
      }
    }
  },
  destroyed () {
    clearInterval(this.timer)
  }
}
</script>