基于 Vue 3 和 Element Plus 实现了表格自动滚动

🧩 功能概述

1. 表格支持展开行（expand）以显示更多详情信息。

2. 数据来源于响应式变量 tableData，通过 API 请求获取并更新。

3. 实现了表格内容的自动垂直滚动，并在鼠标悬停时暂停滚动，提升用户体验。

4. 组件挂载后启动自动滚动。组件卸载时清除定时器，避免内存泄漏。

---

🛠️ 技术实现

模板部分 (template)

<el-table
   ref="scrollTable"
   :data="tableData" 
   height="320px"
   style="width: 100%;" 
   header-cell-class-name="table-header"
>
   ......表格内容
</el-table>

• 使用 el-table 构建表格，固定高度为 320px。
• 设置 ref="scrollTable" 以便在脚本中引用 DOM 元素。

---

脚本部分 (script setup)

响应式引用

const scrollTable = ref()
const scrollTimer = ref()

• scrollTable：用于访问表格 DOM。
• scrollTimer：用于控制自动滚动的定时器。

自动滚动逻辑

// 表格自动轮播
const autoScroll = (isScroll) => {
  console.log(scrollTable.value, 'scrollTable.valuescrollTable.value')
  const table = scrollTable?.value?.layout?.table?.refs
  const tableWrapper = table.bodyWrapper.firstElementChild.firstElementChild

  //鼠标放上去，停止滚动；移开，继续滚动
  tableWrapper.addEventListener('mouseover', () => {
    isScroll = false
  })
  tableWrapper.addEventListener('mouseout', () => {
    isScroll = true
  })
  scrollTimer.value = setInterval(() => {
    if (isScroll) {
      tableWrapper.scrollTop += 1
      // 到达最后一行时从第一条继续
      if (tableWrapper.clientHeight + tableWrapper.scrollTop + 0.5 >=         
      tableWrapper.scrollHeight) {
        tableWrapper.scrollTop = 0
      }
    }
  }, 50)
}

• 获取表格主体 DOM 并监听鼠标事件。
• 使用 setInterval 实现每 50ms 向下滚动 1px。
• 滚动到底部后重置到顶部，形成循环效果。

生命周期钩子

// 组件挂载时执行
onMounted(async () => {
  autoScroll(true)
})

onUnmounted(() => {
  scrollTimer.value && clearInterval(scrollTimer.value)
})

• 在组件挂载时启动自动滚动。
• 在组件卸载时清除定时器，防止内存泄漏。