大屏element表格自滚动+el-table-infinite-scroll无限滚动

element表格自滚动，鼠标移入时停止滚动且可选中

<template>
    <div>
        <el-table
          :data="tableData"
          ref="rw_table"
          v-el-table-infinite-scroll="load"
          @mouseenter.native="mouseEnter"
          @mouseleave.native="mouseLeave"
          height="100%"
          style="width: 100%;"
          :cell-style="{ textAlign: 'center' }"
          :header-cell-style="{ textAlign: 'center', color: '#17AEF9' }"
        >
          <el-table-column
            prop="siteName"
            label="自领点"
            align="center"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
        </el-table>
    </div>
</template>
<script>
import elTableInfiniteScroll from 'el-table-infinite-scroll';
let rolltimer = '' // 自动滚动的定时任务
export default {
    directives: {
    'el-table-infinite-scroll': elTableInfiniteScroll
  },
  data(){
      return{
          tableData: [],
      }
  },
  mounted() {
    this.autoRoll()
  },
  methods: {
     // 触底刷新 判断总页数和当前页数是否一致
     load() {
        if (this.totalPage > this.pageObj.pageNo) {
            this.pageObj.pageNo +=1;
            this.getData();
        }
    },
      // 鼠标进入
    mouseEnter(time) {
        // 鼠标进入停止滚动和切换的定时任务
        this.autoRoll(true)
    },
    // 鼠标离开
    mouseLeave() {
        // 开启
        this.autoRoll()
    },
    autoRoll(stop) {
        if (stop) {
            clearInterval(rolltimer)
            return
        }
        // 拿到表格挂载后的真实DOM
        const table =  this.$refs.rw_table
        // 拿到表格中承载数据的div元素
        const divData = table.bodyWrapper
        // 拿到元素后，对元素进行定时增加距离顶部距离，实现滚动效果
        rolltimer = setInterval(() => {
            // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
            if (divData.clientHeight + divData.scrollTop == divData.scrollHeight) {
            // 重置table距离顶部距离
            divData.scrollTop = 0
            } else {
                // 元素自增距离顶部像素
                divData.scrollTop += 2
            }
        }, 100)
     },
  }
}
</script>