vue3，element ui框架中为el-table表格实现自动滚动,并实现表头汇总数据

基础用法不太明白的请参考官网文档 ；element ui Plus官网：Table 表格 | Element PlusA Vue 3 based component library for designers and developershttps://element-plus.org/zh-CN/component/table.html

1、添加一个基础表格

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="date" label="Date" width="180" />
    <el-table-column prop="name" label="Name" width="180" />
    <el-table-column prop="address" label="Address" />
  </el-table>
</template>

2、为表格添加一下基础的样式，为并设置固定的高度：

max-height="430" 

为表格添加一个id类名 ，或者  table-layout="fixed"

id="out-table"   table-layout="fixed"

例如这是一个完成的样式：

<template>
 <el-table
          ref="tableRef" border id="out-table" :data="headerList" :fit="true" table-layout="fixed"
          max-height="430"
          header-align="center" style="width:100%;" :header-cell-style="{
          color: '#1e293b',textAlign: 'center',fontWeight: '600',
          background: 'linear-gradient(to bottom, #f8fafc, #f1f5f9)',borderColor: '#e2e8f0',height: '40px'}"
          :cell-style="{textAlign: 'center',color: '#334155',borderColor: '#e2e8f0',background: '#fff',height: '40px'}">
          <el-table-column prop="materialType" :label="$t('common.materialType')">
            <template #header>
              <span class="flex items-center justify-center w-full">
                {{ $t('common.materialType') }}
                <span class="text-indigo-500 ml-2 text-sm">({{ headerList.length }})</span>
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="sourceWarehouName" :label="$t('common.OutWarehouse')" >
            <template #default="scope">
              <el-button-group size="">
                <el-button type="info w-[80px]" class="">{{scope.row.sourceWarehouName}}</el-button>
                <el-button type="info w-[80px]"  class="" plain>{{scope.row.sourceWarehouCode}}</el-button>
              </el-button-group>
            </template>
          </el-table-column>
          <el-table-column prop="targetWarehouName" :label="$t('common.InWarehouse')" >
            <template #default="scope">
              <el-button-group size="">
                <el-button type="primary w-[80px]" class="">{{scope.row.targetWarehouName}}</el-button>
                <el-button type="primary w-[80px]"  class="" plain>{{scope.row.targetWarehouCode}}</el-button>
              </el-button-group>
            </template>
          </el-table-column>
          <el-table-column prop="qty" :label="$t('mes.qty')" width="120">
            <template #default="scope">
              <el-tag type="warning" size="large"  class="w-[90px]" plain>{{scope.row.qty}}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="unit" :label="$t('wms.unit')" width="80">
            <template #default="scope">
              <el-tag type="info" size="large" class="w-[60px]" plain effect="">{{scope.row.unit}}</el-tag>
            </template>
          </el-table-column>
        </el-table>
</template>

3、JS部分

注意：这里省略了给表格赋值的代码，自己自行添加（里面只有自动滚动部分的代码）

1. 表格会以每 50 毫秒 1 像素的速度自动向下滚动。
2. 当滚动到底部时，暂停 3 秒钟，然后将滚动条重置到顶部，继续滚动。
3. 如果用户与滚动区域交互（例如手动拖动滚动条），则暂停自动滚动，直到用户停止交互后再恢复。
4. 标记用户正在交互：将 isUserInteracting 设置为 true，表示用户正在与滚动区域进行交互。
5. 保存当前滚动位置：通过 scrollWrapper.scrollTop 获取当前滚动条的位置，并将其存储到 lastScrollPosition 中。
6. 暂停自动滚动：调用 stopScroll() 方法，清除定时器，停止自动滚动。

<script setup>

// 定义表格的数据绑定
const headerList = ref([])
const tableRef = ref(null)

//定义滚动的变量
let scrollTimer = null
let isUserInteracting = false
let lastScrollPosition = 0

const startScroll = () => {
  if (scrollTimer) {
    clearInterval(scrollTimer)
  }
  scrollTimer = setInterval(() => {
    //  tableRef 是 Vue 的响应式引用，指向表格组件实例。
    //  只有当表格存在且用户没有与滚动区域交互时，才会继续执行滚动逻辑。
    const table = tableRef.value
    if (table && !isUserInteracting) {
    // 通过 querySelector 获取表格的滚动容器（.el-scrollbar__wrap），这是 Element UI 表格组件的默认滚动区域。
      const scrollWrapper = table.$el.querySelector('.el-scrollbar__wrap')
      if (scrollWrapper) {


      // scrollWrapper.scrollTop：当前滚动条顶部距离。
      // scrollWrapper.clientHeight：可见区域的高度。
      // scrollWrapper.scrollHeight：整个内容的高度。
      // 如果 scrollTop + clientHeight >= scrollHeight，说明已经滚动到底部

        if (scrollWrapper.scrollTop + scrollWrapper.clientHeight >= scrollWrapper.scrollHeight) {
          // 到达底部，暂停3秒   等待 3 秒后将滚动条重置到顶部，并重新启动滚动逻辑
          clearInterval(scrollTimer)
          setTimeout(() => {
            scrollWrapper.scrollTop = 0
            startScroll()
          }, 3000)
        } else {
          //如果未到达底部，则每次将滚动条向下移动 1 像素
          scrollWrapper.scrollTop += 1
        }
      }
    }
  }, 50)
}

const stopScroll = () => {
  if (scrollTimer) {
    clearInterval(scrollTimer)
    scrollTimer = null
  }
}

//处理用户与表格滚动区域的交互，确保在用户操作时暂停自动滚动，并在用户停止操作后恢复滚动。
const handleUserInteraction = () => {
  isUserInteracting = true
  const table = tableRef.value
  if (table) {
    const scrollWrapper = table.$el.querySelector('.el-scrollbar__wrap')
    if (scrollWrapper) {
      lastScrollPosition = scrollWrapper.scrollTop
    }
  }
  stopScroll()
}

const resumeScroll = () => {
  isUserInteracting = false
  const table = tableRef.value
  if (table) {
    const scrollWrapper = table.$el.querySelector('.el-scrollbar__wrap')
    if (scrollWrapper) {
      scrollWrapper.scrollTop = lastScrollPosition
    }
  }
  startScroll()
}


onMounted(async () => {
  await getDefaultDateRange()
  await rawMaterialsTransferSummary()
  startScroll()
  
  // 添加用户交互事件监听
  const table = tableRef.value
  if (table) {
    const scrollWrapper = table.$el.querySelector('.el-scrollbar__wrap')
    if (scrollWrapper) {
      scrollWrapper.addEventListener('mousedown', handleUserInteraction)
      scrollWrapper.addEventListener('touchstart', handleUserInteraction)
      scrollWrapper.addEventListener('mouseup', resumeScroll)
      scrollWrapper.addEventListener('touchend', resumeScroll)
      scrollWrapper.addEventListener('wheel', handleUserInteraction)
    }
  }
})

onUnmounted(() => {
  stopScroll()
  // 移除事件监听
  const table = tableRef.value
  if (table) {
    const scrollWrapper = table.$el.querySelector('.el-scrollbar__wrap')
    if (scrollWrapper) {
      scrollWrapper.removeEventListener('mousedown', handleUserInteraction)
      scrollWrapper.removeEventListener('touchstart', handleUserInteraction)
      scrollWrapper.removeEventListener('mouseup', resumeScroll)
      scrollWrapper.removeEventListener('touchend', resumeScroll)
      scrollWrapper.removeEventListener('wheel', handleUserInteraction)
    }
  }
})
</script>