ant design vue 表格自动滚动，鼠标移入表格滚动

//a-table标签添加class="tableRect"
<a-table class="tableRect"/>

<script>
  data() {
    return {
      scrollTimer: null, // 滚动定时器
      scrollDirection: 'down', // 滚动方向 up向上 down向下
  },
  created() {
    //this.scrollFun();
  },
  methods: {
    scrollFun() {
      // 如果定时器存在
      if (this.scrollTimer) {
        // 则先清除
        clearInterval(this.scrollTimer)
        this.scrollTimer = null
      }
      this.scrollTimer = setInterval(() => {
        const scrollHeight = document.querySelectorAll(`.tableRect .ant-table-body`)[0].scrollHeight
        const clientHeight = document.querySelectorAll(`.tableRect .ant-table-body`)[0].clientHeight
        const scroll = scrollHeight - clientHeight
        // 获取当前滚动条距离顶部高度        tableRect是a-table标签名
        const scrollTop = document.querySelectorAll(`.tableRect .ant-table-body`)[0].scrollTop
        console.log('scrollTop',scrollTop);
        // 向下滚动
        if (this.scrollDirection === 'down') {
          // 滚动速度
          const temp = scrollTop + 10
          document.querySelectorAll(`.tableRect .ant-table-body`)[0].scrollTop = temp // 滚动
          // 距离顶部高度  大于等于 滚动长度
          if (scroll <= temp) {
            // 滚动到底部 停止定时器
            clearInterval(this.scrollTimer)
            this.scrollTimer = null
          }
        }
      }, 150)
    },
   }
</script>
 

参考：【vue】实现页面自动滚动效果_辛德瑞拉和Thomas的博客-CSDN博客_vue 自动滚动

增加：鼠标移入表格滚动，移除停止滚动

//在a-table标签外添加一个div标签
<div v-on:mouseover="scrollFun"
     v-on:mouseout="pauseScroll">
     <a-table/>
</div>

<script>
  methods: {
    pauseScroll() {
      // 定时器不为空
      if (this.scrollTimer) {
        // 清除定时器
        clearInterval(this.scrollTimer)
        this.scrollTimer = null
      }
    }
  }
</script>

参考：vue中 给元素添加鼠标移入，鼠标移出的效果的事件_今天星期八的博客-CSDN博客_vue鼠标移入事件