vue element table 自动循环滚动行拼接轮回，鼠标移上停止，移除滚动

1、普通自定义表格，自动循环滚动行拼接轮回

<template>
  <div class="processing_container">
    <div class="header">
      <div class="left">
        <span>预警消息</span>
        <el-badge :value="total" class="item" />
      </div>
      <div class="right">
        <el-button type="text" @click="goProcessing">更多 ></el-button>
      </div>
    </div>
    <div
      ref="scrollContainer"
      class="main"
      @mouseenter="handleMouseEnter"
      @mouseleave="handleMouseLeave"
    >
      <span v-for="(reminder, index) in reminders" :key="index" class="reminder" @click="detail(reminder)">
        <span class="seq">{{ reminder.index }}</span>
        <span class="title">{{ reminder.name }}</span>
        <span style="color: #cccccc;margin-right: 6.5px">|</span>
        <span class="day">{{ reminder.count }}</span>
        <span class="info">{{ reminder.content }}</span>
        <span class="day">30天内到期</span>
      </span>
    </div>
  </div>
</template>

<script>
import $api from '@/views/platform/api.js'
export default {
  data() {
    return {
      reminders: [],
      activeIndex: 0,
      tabIndex: 0,
      total: null,
      timer: null, // 用来保存定时器的引用
      scrollingPaused: false // 控制是否暂停滚动
    }
  },
  created() {
    $api.getWarningList().then(res => {
      this.reminders = res.data.list
      // 复制数据以实现无缝滚动
      this.reminders = this.reminders.concat(res.data.list)
      this.total = res.data.total
    })
  },
  mounted() {
    this.autoCycle()
  },
  beforeDestroy() {
    // 清除定时器
    clearInterval(this.timer)
  },
  methods: {
    // 自动滚动方法
    autoCycle() {
      const scrollContainer = this.$refs.scrollContainer
      // 定时器每3秒滚动一次
      this.timer = setInterval(() => {
        // 元素自增距离顶部1像素
        if (!this.scrollingPaused) {
          scrollContainer.scrollTop += 1
          // 判断元素是否滚动到底部（可视高度+距离顶部=整个高度）
          if (scrollContainer.clientHeight + scrollContainer.scrollTop >= scrollContainer.scrollHeight) {
            // 重置 table 距离顶部距离。值 = (滚动到底部时，距离顶部的大小) - 整个高度/2
            scrollContainer.scrollTop = scrollContainer.scrollTop - scrollContainer.scrollHeight / 2
          }
        }
      }, 50) // 每3秒触发一次滚动
    },
    // 鼠标移入时暂停滚动
    handleMouseEnter() {
      this.scrollingPaused = true
    },
    // 鼠标移除时继续滚动
    handleMouseLeave() {
      this.scrollingPaused = false
    },
    goProcessing() {
      this.$emit('goProcessing')
    },
    detail(item) {
      const routes = {
        '客户合同': '/fms/customer/clientContract',
        '供应商资质': '/fms/supplier/cert',
        '供应商合同': '/fms/supplier/contract',
        '车辆建档': '/system/vehicleManage',
        '车辆合同': '/system/vehicleContract',
        '场地合同': '/fms/lease/siteContract',
        '项目合伙供应商合同': '/fms/partner/supplier/contract',
        '项目合伙供应商资质': '/fms/partner/supplier/cert',
        '内部借款合同': '/fms/intrabranch/borrowing/contract'
      }

      const targetPath = routes[item.name]

      if (targetPath) {
        // 获取今天的日期
        const today = new Date()

        // 获取未来30天的日期
        const lastDate = new Date(today)
        lastDate.setDate(today.getDate() + 30) // 设置为今天往后30天

        // 格式化为 YYYY-MM-DD
        const formattedToday = today.toISOString().split('T')[0]
        const formattedLastDate = lastDate.toISOString().split('T')[0]
        this.$router.push({ path: targetPath, query: { beginDate: formattedToday, endDate: formattedLastDate }})
      }
    }
  }
}
</script>

<style lang="scss" scoped>
:deep {
  .el-button--text {
    color: #999999;
  }
}
::-webkit-scrollbar {
  display: none;
}

.item {
  margin-top: 10px;
  margin-left: 5px;
}

.reminder {
  background: linear-gradient(to right, #FFF3F3, #FFFFFF);
  margin-bottom: 9px; /* 列表项之间的间距 */
  padding: 0 9px; /* 内边距 */
  border-radius: 5px; /* 圆角边框 */
  display: inline-block;
  width: 100%;
  cursor: pointer;
  height: 36px;
  line-height: 32px;
  text-shadow: 0 10px 20px rgba(0,0,0,0.05);
  text-align: left;
  font-style: normal;
}
.title {
  display: inline !important;
  font-family: PingFangSC, PingFang SC;
  font-weight: 600;
  font-size: 16px;
  color: #303133;
  margin-right: 6.5px;
}

.seq {
  font-family: HarmonyOS_Sans_Black;
  font-size: 16px;
  color: #FF5153;
  margin-right: 10px;
}

.info {
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 13px;
  color: #303133;
}

.day {
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 13px;
  color: #ff6b6d;
}

.processing_container{
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 30px 0 0 30px;
    .main{
      overflow: hidden; /* 确保内容不会超出容器 */
      position: relative; /* 为事件监听添加定位 */
    }
}
</style>

2、vue element table 自动循环滚动行拼接轮回，鼠标移上去能停止，移除能滚动

<template>
  <div
    class="scroll-container"
    @mouseenter="handleMouseEnter"
    @mouseleave="handleMouseLeave"
  >
    <el-table
      ref="table"
      :data="tableData"
      stripe
      style="width: 100%"
      height="402"
    >
      <el-table-column prop="num" label="序号" width="80" />
      <!-- 其它 table 列 -->
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      timer: null,
      scrollingPaused: false, // 控制是否暂停滚动
      // 注意：它需要将展示的数据额外复制一份（为了无缝滚动）
      tableData: [
        { num: 1 },
        { num: 2 },
        { num: 3 },
        { num: 4 },
        { num: 5 },
        { num: 6 },
        { num: 7 },
        { num: 8 },
        { num: 9 },
        { num: 10 },
        // 复制数据以实现无缝滚动
        { num: 1 },
        { num: 2 },
        { num: 3 },
        { num: 4 },
        { num: 5 },
        { num: 6 },
        { num: 7 },
        { num: 8 },
        { num: 9 },
        { num: 10 }
      ]
    }
  },
  mounted() {
    this.autoCycle()
  },
  beforeDestroy() {
    clearInterval(this.timer)
  },
  methods: {
    // 自动循环播放
    autoCycle() {
      const wrapper = this.$refs.table.bodyWrapper
      this.timer = setInterval(() => {
        if (!this.scrollingPaused) {
          // 元素自增距离顶部1像素
          wrapper.scrollTop += 1
          // 判断元素是否滚动到底部（可视高度+距离顶部=整个高度）
          if (wrapper.clientHeight + wrapper.scrollTop >= wrapper.scrollHeight) {
            // 重置 table 距离顶部距离。值 = (滚动到底部时，距离顶部的大小) - 整个高度/2
            wrapper.scrollTop = wrapper.scrollTop - wrapper.scrollHeight / 2
          }
        }
      }, 50)
    },
    handleMouseEnter() {
      this.scrollingPaused = true // 鼠标移入时暂停滚动
    },
    handleMouseLeave() {
      this.scrollingPaused = false // 鼠标移除时继续滚动
    }
  }
}
</script>

<style>
.scroll-container {
  /* 根据需要调整样式 */
  overflow: hidden; /* 确保内容不会超出容器 */
  position: relative; /* 为事件监听添加定位 */
}
</style>