ant-design-vue 的通过控制a-table的滚动条实现表格滚动效果

<template>
      <div v-on:mouseout="scrollFun" v-on:mouseover="pauseScroll">
              <a-table
                :class="'my-index-table tytable1 tableRect'"
                ref="table1"
                size="small"
                rowKey="Id"
                :columns="columns1"
                :dataSource="dataSource1"
                :loading="loading"
                :pagination="false"
                :scroll="{ y: 200 }"
              >
              </a-table>
       </div>
<template/>
<script>
  data() {
    return {
    	loading:false,
    	columns1:[ {
          title: '省份',
          dataIndex: 'provinceName',
          align: 'center',
          width: 65,
          ellipsis: true
        },

        {
          title: '地市',
          dataIndex: 'cityCountyName',
          align: 'center',
          width: 65,
          ellipsis: true
        },
        {
          title: '县区',
          dataIndex: 'countyName',
          align: 'center',
          width: 65,
          ellipsis: true
        },],
        dataSource1:[
        {provinceName:'1',cityCountyName:'1',countyName:'1',Id:1},
        {provinceName:'1',cityCountyName:'1',countyName:'1',Id:2},
        {provinceName:'1',cityCountyName:'1',countyName:'1',Id:3},
        {provinceName:'1',cityCountyName:'1',countyName:'1',Id:4},
        {provinceName:'1',cityCountyName:'1',countyName:'1',Id:5},
        {provinceName:'1',cityCountyName:'1',countyName:'1',Id:6},
        {provinceName:'1',cityCountyName:'1',countyName:'1',Id:8},
        {provinceName:'1',cityCountyName:'1',countyName:'1',Id:9},
        {provinceName:'1',cityCountyName:'1',countyName:'1',Id:10},
        {provinceName:'1',cityCountyName:'1',countyName:'1',Id:11},
        {provinceName:'1',cityCountyName:'1',countyName:'1',Id:12},
        {provinceName:'1',cityCountyName:'1',countyName:'1',Id:13},
        {provinceName:'1',cityCountyName:'1',countyName:'1',Id:14},
        {provinceName:'1',cityCountyName:'1',countyName:'1',Id:15},
        ]
    }
  },
  mounted() {
    this.$nextTick(() => {
      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
        // 向下滚动
        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
          }
        }
      }, 300)
    },
    // 停止滚动
    pauseScroll() {
      // 定时器不为空
      if (this.scrollTimer) {
        // 清除定时器
        clearInterval(this.scrollTimer)
        this.scrollTimer = null
      }
    },
}
<script/>