Vue3实现el-table自动滚动

<template>
  <el-table
    :data="cameraList"
    class="zq-table-theme-info"
    ref="scrollTableOne"
    :header-cell-style="{ background: '#0B2545', color: 'white' }"
    :cell-style="{ background: '#0B2545', color: 'white' }"
    style="height: 350px; background-color: rgb(11, 37, 69)"
  >
    <el-table-column
      prop="date"
      label="日期"
      align="center"
      show-overflow-tooltip
    >
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      align="center"
      show-overflow-tooltip
    >
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址"
      align="center"
      show-overflow-tooltip
    >
    </el-table-column>
  </el-table>
</template>

let cameraList = ref([]);
const tableNode = ref(null);
let scrollTableOne = ref("");
const scrollTable = () => {
  if (cameraList.value) {
    tableNode.value =
      scrollTableOne.value.$refs.bodyWrapper.getElementsByClassName(
        "el-scrollbar__wrap"
      )[0];
    const tableScroll = ref(true);
    tableNode.value.addEventListener("mouseover", () => {
      tableScroll.value = false;
    });
    tableNode.value.addEventListener("mouseout", () => {
      tableScroll.value = true;
    });
    setInterval(() => {
      if (tableScroll.value) {
        tableNode.value.scrollTop++;
        if (
          tableNode.value.clientHeight + tableNode.value.scrollTop ===
          tableNode.value.scrollHeight
        ) {
          tableNode.value.scrollTop = 0;
        }
      }
    }, 30);
  }
};