el-table轮播

<el-table ref="reportTable" :data="tableData" stripe style="width: 98%;margin:0 auto;">
                        <!-- <el-table-column prop="rank" label="排名" align="center"></el-table-column> -->
                        <el-table-column prop="name" label="姓名/车牌" align="center" />
                        <el-table-column prop="leave" label="离开时间" align="center" />
                        <el-table-column prop="enter" label="进入时间" align="center" />
                        <el-table-column prop="matter" label="事由" align="center" />
                    </el-table>
import common from '../common.js'
const reportTable = ref()

const tableData = ref([
    { rank:'1',name: '李某',leave:'2018-07-24',enter:'2018-07-25',matter:'出差'},
    { rank:'2',name: '张某',leave:'2018-07-24',enter:'2018-07-25',matter:'出差'},
    { rank:'3',name: '王某',leave:'2018-07-24',enter:'2018-07-25',matter:'出差'},
    { rank:'4',name: '陈某',leave:'2018-07-24',enter:'2018-07-25',matter:'出差'},
    { rank:'5',name: '黄某',leave:'2018-07-24',enter:'2018-07-25',matter:'出差'},
    { rank:'6',name: '刘某',leave:'2018-07-24',enter:'2018-07-25',matter:'出差'},
    { rank:'7',name: '吴某',leave:'2018-07-24',enter:'2018-07-25',matter:'出差'},
    { rank:'8',name: '林某',leave:'2018-07-24',enter:'2018-07-25',matter:'出差'},
    { rank:'9',name: '赵某',leave:'2018-07-24',enter:'2018-07-25',matter:'出差'},
    { rank:'10',name: '周某',leave:'2018-07-24',enter:'2018-07-25',matter:'出差'},
    { rank:'11',name: '钱某',leave:'2018-07-24',enter:'2018-07-25',matter:'出差'},
    { rank:'12',name: '孙某',leave:'2018-07-24',enter:'2018-07-25',matter:'出差'},
])


onMounted(()=>{
    tabActive2.value = true;
    common.scrollUp(reportTable.value);
    init()
    nextTick(() => {
        let div = document.querySelector(".el-table");
        console.log("div", div);

        if (div) {
            div.style.height = "330px";
            div.addEventListener("mouseenter", function () {
                isScroll = false;
            });
            div.addEventListener("mouseleave", function () {
                isScroll = true;
            });
            let t = document.querySelector(".el-table__body") ;
            if (t) {
                setInterval(() => {
                    if (isScroll) {
                        var data = waitApproData.value[0];
                        setTimeout(() => {
                            waitApproData.value.push(data);
                            t.style.transition = "all .5s";
                            t.style.marginTop = "-41px";
                        }, 500);
                        setTimeout(() => {
                            waitApproData.value.splice(0, 1);
                            t.style.transition = "all 0s ease 0s";
                            t.style.marginTop = "0";
                        }, 1000);
                    }
                }, 2500);
            }
        }
    });
})

commonjs

import { ref } from 'vue'

export default {
    scrollUp(tableRef) {
        const demo = tableRef.$refs.bodyWrapper.getElementsByClassName('el-scrollbar__wrap')[0]
        const tbodyData = demo.querySelector('.el-table__body tbody');
        // 遍历克隆并追加tr数据
        setTimeout(() => {
            tbodyData.querySelectorAll('tr').forEach(tr => {
                const clonedTr = tr.cloneNode(true); // 克隆tr元素
                tbodyData.appendChild(clonedTr); // 将克隆后的tr元素追加到目标tbody的最后
            });
        }, 1000);
        const tableScroll = ref(true)
        demo.addEventListener('mouseover', () => {
            tableScroll.value = false
        })
        demo.addEventListener('mouseout', () => {
            tableScroll.value = true
        })
        setInterval(() => {
            if (tableScroll.value) {
                demo.scrollTop += 1;
                if (demo.scrollTop > (demo.scrollHeight / 2)) {
                    demo.scrollTop = 0
                    console.log(demo.scrollTop, '重复开始');
                }
                // if (demo.clientHeight + demo.scrollTop > demo.scrollHeight) {
                //     demo.scrollTop = 0
                // }
            }
        }, 100)
    }
}