問題｜同一個頁面有兩個以上的滾動的table表格，當設置定時器使鼠標滑入表格中使其暫停功能不生效

解決思路：通過給每個表格傳入一個ID，通過ID去調用定時器。

實現具體步驟如下：

home.vue
<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'
    }
}

ScrollTable.vue(組件)
<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>