vue3如何实现表格内容无缝滚动(又写了一堆冗余代码)

npm
npm install vue3-seamless-scroll --save

yarn
yarn add vue3-seamless-scroll

browser
<script src="http://9i0i.com/pic.php?p=https://unpkg.com/browse/vue3-seamless-scroll@1.0.2/dist/vue3-seamless-scroll.min.js"></script>

// **main.js**
import { createApp } from 'vue';
import App from './App.vue';
import vue3SeamlessScroll from "vue3-seamless-scroll";
const app = createApp(App);
app.use(vue3SeamlessScroll);
app.mount('#app');

<script>
  import { defineComponent } from "vue";
  import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
   export default defineComponent({
      components: {
        Vue3SeamlessScroll
      }
   })
</script>

<template>
    <div class="container">
        <el-table class="top-table" :data="tableData" border style="width: 100%;">
            <el-table-column prop="type" label="类型" width="120" />
            <el-table-column prop="name" label="姓名" />
            <el-table-column prop="content" label="内容" />
        </el-table>
        <vue3-seamless-scroll class="seamless" :list="tableData" :hover="true" :step="0.4" :wheel="true" :isWatch="true">
            <el-table class="bottom-table" :data="tableData" border style="width: 100%;">
                <el-table-column prop="type" label="类型" width="120" />
                <el-table-column prop="name" label="姓名" />
                <el-table-column prop="content" label="内容" />
            </el-table>
        </vue3-seamless-scroll>
    </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const tableData: any = ref([])

const getData = () => {
    for (let i = 0; i < 6; i++) {
        tableData.value.push({
            type: `家常菜${i + 1}`,
            name: `洋茄子炒鸡蛋${i + 1}`,
            content: `多情键客无情键${i + 1}`
        })
    }
}
getData()
</script>

<style scoped>
.container {
    width: 500px;
    height: 300px;
}
.seamless {
    width: 100%;
    height: 220px;
    overflow: hidden;
}
:deep .top-table .el-table__body-wrapper {
    display: none;
}
:deep .bottom-table .el-table__header-wrapper {
    display: none;
    width: 100%;
}
</style>

<template>
    <div class="container">
        <el-table ref="tableRef" :data="tableData" border style="width: 100%;height: 100%;">
            <el-table-column prop="type" label="类型" width="120" />
            <el-table-column prop="name" label="姓名" />
            <el-table-column prop="content" 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 += 40;
            // 当滚动到底部时修改scrollTop回到顶部
            if ((scrollDom.scrollHeight - (scrollDom.clientHeight + scrollDom.scrollTop)) < 1 ) {
                scrollDom.scrollTop = 0;
            }
        }
    }, 1000);
}

const tableData = ref([])
const getData = () => {
    for (let i = 0; i < 50; i++) {
        tableData.value.push({
            type: `家常菜${i + 1}`,
            name: `洋茄子炒鸡蛋${i + 1}`,
            content: `多情键客无情键${i + 1}`
        })
    }
    // 要在数据都加载渲染完成后去获取表格的滚动区域dom
    setTimeout(() => {scroll()}, 1000)
}


onMounted(() => {
    getData()
})

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

</script>

<style scoped>
.container {
    width: 500px;
    height: 310px;
}
</style>