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.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="內(nèi)容" />
        </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="內(nèi)容" />
            </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="內(nèi)容" />
        </el-table>
    </div>
</template>

<script setup>

import { ref, onMounted, onUnmounted } from 'vue'

let timer = null;
let tableRef = ref(null);
const scroll = () => {
    // 在執(zhí)行新的計(jì)時(shí)器前將之前的計(jì)時(shí)器清除
    if (timer) clearInterval(timer);
    let status = true;
    // 獲取表格滾動(dòng)區(qū)域的dom
    const scrollDom = tableRef.value.$refs.bodyWrapper.getElementsByClassName("el-scrollbar__wrap")[0];

    // 增加監(jiān)聽事件鼠標(biāo)移入停止?jié)L動(dòng)
    scrollDom.addEventListener('mouseover', () => {
        status = false;
    });
    // 鼠標(biāo)移出恢復(fù)滾動(dòng)
    scrollDom.addEventListener('mouseout', () => {
        status = true;
    });

    // 設(shè)置每秒滾動(dòng)一行
    timer = setInterval(() => {
        if (status) {
        	// 設(shè)置每次滾動(dòng)的像素
            scrollDom.scrollTop += 40;
            // 當(dāng)滾動(dòng)到底部時(shí)修改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}`
        })
    }
    // 要在數(shù)據(jù)都加載渲染完成后去獲取表格的滾動(dòng)區(qū)域dom
    setTimeout(() => {scroll()}, 1000)
}


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

onUnmounted(() => {
	// 組件卸載記得清除計(jì)時(shí)器
    if (timer) clearInterval(timer);
    timer = null;
})

</script>

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