实现el-table表单自动滚动

 效果是表格数据自动滚动，鼠标移入暂停滚动 移出滚动继续 

首先 设置ref="tableRef" 获取当前的dom元素

 <div class="topTable">
        <el-table ref="tableRef" :data="tableData" border style="width: 100%;height: 100%;">
            <el-table-column prop="name" label="名字" width="120" />
            <el-table-column prop="age" label="年龄" />
            <el-table-column prop="No" label="内容" />
        </el-table>
    </div>

 然后设置计时器，并且设置鼠标移入移出事件 并且设置定时器进行数据滚动

//设置时间
let timer = null;
  let tableRef = ref(null);
  const scroll = () => {
    // 在执行新的计时器前将之前的计时器清除
    if (timer) clearInterval(timer);
    let status = true;
    // 获取表格滚动区域的dom
    const scrollDom = tableRef.value.$refs.bodyWrapper.getElementsByClassName("el-scrollbar__wrap")[0];
    // 增加监听事件鼠标移入停止滚动
    scrollDom.addEventListener('mouseover', () => {
        status = false;
    });
    // 鼠标移出恢复滚动
    scrollDom.addEventListener('mouseout', () => {
        status = true;
    });
    // 设置每秒滚动一行
    timer = setInterval(() => {
        if (status) {
          // 设置每次滚动的像素
            scrollDom.scrollTop += 1;
            // 当滚动到底部时修改scrollTop回到顶部
            if ((scrollDom.scrollHeight - (scrollDom.clientHeight + scrollDom.scrollTop)) < 1 ) {
                scrollDom.scrollTop = 0;
            }
        }
  //控制速度
    }, 20);
  }
  // tableData数据 也可根据自己的接口调用
  const tableData = ref([  
  { name: 'John', age: 25, No: '112' },  
  { name: 'Jane', age: 30, No: '24' },  
  { name: 'Bob', age: 35, No: '454' },  
  { name: 'Alice', age: 28, No: '435' },  
  { name: 'John', age: 25, No: '435' },  
  { name: 'Jane', age: 30, No: '4354' },  
  { name: 'Bob', age: 35, No: '4534' },  
  { name: 'Alice', age: 28, No: '45' },
  { name: 'John', age: 25, No: '45' },  
  { name: 'Jane', age: 30, No: '435' },  
  { name: 'Bob', age: 35, No: '455' },  
  { name: 'Alice', age: 28, No: '45' }, 
  { name: 'Tom', age: 32, No: '544' }  
]);  
//设置定时器进行自滚动
const getData = () => {
  setTimeout(() => {scroll()}, 5)
}

 页面上挂载以及卸载

onMounted(() => {
  getData()
})
onUnmounted(() => {
// 组件卸载记得清除计时器
  if (timer) clearInterval(timer);
  timer = null;
})

最后完整代码展示

  <template>
    <div class="topTable">
        <el-table ref="tableRef" :data="tableData" border style="width: 100%;height: 100%;">
            <el-table-column prop="name" label="名字" width="120" />
            <el-table-column prop="age" label="年龄" />
            <el-table-column prop="No" label="编号" />
        </el-table>
    </div>
  </template>
  <script setup>
  import { ref, onMounted, onUnmounted } from 'vue'
  let timer = null;
  let tableRef = ref(null);
  const scroll = () => {
    // 在执行新的计时器前将之前的计时器清除
    if (timer) clearInterval(timer);
    let status = true;
    // 获取表格滚动区域的dom
    const scrollDom = tableRef.value.$refs.bodyWrapper.getElementsByClassName("el-scrollbar__wrap")[0];
    // 增加监听事件鼠标移入停止滚动
    scrollDom.addEventListener('mouseover', () => {
        status = false;
    });
    // 鼠标移出恢复滚动
    scrollDom.addEventListener('mouseout', () => {
        status = true;
    });
    // 设置每秒滚动一行
    timer = setInterval(() => {
        if (status) {
          // 设置每次滚动的像素
            scrollDom.scrollTop += 1;
            // 当滚动到底部时修改scrollTop回到顶部
            if ((scrollDom.scrollHeight - (scrollDom.clientHeight + scrollDom.scrollTop)) < 1 ) {
                scrollDom.scrollTop = 0;
            }
        }
  //控制速度
    }, 20);
  }
  // const tableData = ref([])
  const tableData = ref([  
  { name: 'John', age: 25, No: '112' },  
  { name: 'Jane', age: 30, No: '24' },  
  { name: 'Bob', age: 35, No: '454' },  
  { name: 'Alice', age: 28, No: '435' },  
  { name: 'John', age: 25, No: '435' },  
  { name: 'Jane', age: 30, No: '4354' },  
  { name: 'Bob', age: 35, No: '4534' },  
  { name: 'Alice', age: 28, No: '45' },
  { name: 'John', age: 25, No: '45' },  
  { name: 'Jane', age: 30, No: '435' },  
  { name: 'Bob', age: 35, No: '455' },  
  { name: 'Alice', age: 28, No: '45' }, 
  { name: 'Tom', age: 32, No: '544' }  
]);  
//设置定时器进行自滚动
const getData = () => {
  setTimeout(() => {scroll()}, 5)
}

onMounted(() => {
  getData()
})
onUnmounted(() => {
// 组件卸载记得清除计时器
  if (timer) clearInterval(timer);
  timer = null;
})
</script>
<style scoped>
.topTable {
  margin: 300px;
  width: 500px;
  height: 310px;
}
</style>