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">
&