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>