vue3+elementPlus+css+js 模拟liMarquee插件,实现无限滚动效果
功能:1、表格数据大于一定数量之后,开始向上滚动
2、当鼠标移入的时候,动画停止,鼠标移出,继续动画
3、滚动动画的速度可以自定义
4、表格的高度固定
5、向上滚动时,无限滚动,不存在卡顿
<template>
<div
class="scrolling-table-container"
@mouseenter="pauseAnimation"
@mouseleave="resumeAnimation"
>
<div class="table-wrapper" :style="{ height: tableHeight }">
<el-table
:data="displayData"
:loading="loading"
style="width: 100%"
:show-header="showHeader"
:row-key="rowKey"
class="scrolling-table"
:class="{
'enable-scroll': needScroll,
'is-paused': isPaused
}"
>
<el-table-column
v-for="column in columns"
:key="column.prop"
:prop="column.prop"
:label="column.label"
:width="column.width"
:min-width="column.minWidth"
:fixed="column.fixed"
>
<template #default="scope" v-if="column.hasSlot">
&