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

npm
npm install vue3-seamless-scroll --save

yarn
yarn add vue3-seamless-scroll

browser
<script src="https://unpkg.com/browse/vue3-seamless-scroll@1.0.两/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="1两0" />
            <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="1两0" />
                <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: 二二0px;
    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="1两0" />
            <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('mouseo                ver', () => {
        status = false;
    });
    // 鼠标移没回复复兴转机
    scrollDom.addEventListener('mouseo                ut', () => {
        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>