vue3 antdesign table组件 内部数据 自动上下滑动实现

利用scroll相关属性和方法实现table内部数据自动滑动：https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollTo

dom.scrollTop 当前显示顶部位置和隐藏起来的顶部位置的偏移量

dom.scrollHeight 滚动区域完整的高度

dom.scrollBy({top,left,behavior}) 滚动函数 top:垂直滚动的距离 left 水平滚动的距离 behavior：滚动的过程：smooth/instant 平滑/直接

dom.scrollTo({top,left,behavior}) 滚动至函数 top:垂直滚动结束的位置 left 滚动结束的位置 behavior：同上

<BasicTable id="table" :scroll="{ y: 145 }"/>
    
import { ref, watch } from 'vue';
let tableTop = ref<number>(0); //记录当前滚动顶部的位置  便于监听
let table;

//延迟操作 防止组件未渲染获取空dom 建议放到axios的回调函数中
setTimeout(() => {
      //储存table内部dom 减少dom操作 
      table = document.querySelector('#table > div > div > div.ant-table-body');
      //滚动监听 初始向下滚动
      table.addEventListener('scroll', moveToBottom);
      //由于scollTo 的滚动速度存在未知性 所有这里选择用js去触发滚动到底部这个函数 这样可以让滚动缓慢
      table.scrollBy({
          top: 1,
          behavior: 'smooth',
      });
  }, 1000);

  //监听dom当前的位置 滚动到底部则向上滚动 滚动到顶部则向下滚动 注意需要先remove之前的监听函数
  watch(tableTop, (newTop, _) => {
    if (table.scrollHeight === newTop + 145) {
      table.removeEventListener('scroll', moveToBottom);
      table.addEventListener('scroll', moveToTop);
      table.scrollBy({
        top: -1,
        behavior: 'smooth',
      });
    } else if (newTop === 0) {
      table.removeEventListener('scroll', moveToTop);
      table.addEventListener('scroll', moveToBottom);
      table.scrollBy({
        top: 1,
        behavior: 'smooth',
      });
    }
  });

  //滚动至底部
  function moveToBottom() {
    //动态更新当前滚动的位置
    tableTop.value = table.scrollTop;
    table.scrollTo({
      top: table.scrollHeight - 145, //145为设置的滚动区域高度
      behavior: 'smooth',
    });
  }
  //滚动至顶部
  function moveToTop() {
    tableTop.value = table.scrollTop;
    table.scrollTo({
      top: 0,
      behavior: 'smooth',
    });
  }