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部分

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

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