当前位置：首页 > news >正文

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

news 来源：原创 2025/4/25 5:35:05

基础用法不太明白的请参考官网文档；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-tableref="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() 方法，清除定时器，停止自动滚动。

<script setup>// 定义表格的数据绑定
const headerList = ref([])
const tableRef = ref(null)//定义滚动的变量
let scrollTimer = null
let isUserInteracting = false
let lastScrollPosition = 0const startScroll = () => {if (scrollTimer) {clearInterval(scrollTimer)}scrollTimer = setInterval(() => {//  tableRef 是 Vue 的响应式引用，指向表格组件实例。//  只有当表格存在且用户没有与滚动区域交互时，才会继续执行滚动逻辑。const table = tableRef.valueif (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 = 0startScroll()}, 3000)} else {//如果未到达底部，则每次将滚动条向下移动 1 像素scrollWrapper.scrollTop += 1}}}}, 50)
}const stopScroll = () => {if (scrollTimer) {clearInterval(scrollTimer)scrollTimer = null}
}//处理用户与表格滚动区域的交互，确保在用户操作时暂停自动滚动，并在用户停止操作后恢复滚动。
const handleUserInteraction = () => {isUserInteracting = trueconst table = tableRef.valueif (table) {const scrollWrapper = table.$el.querySelector('.el-scrollbar__wrap')if (scrollWrapper) {lastScrollPosition = scrollWrapper.scrollTop}}stopScroll()
}const resumeScroll = () => {isUserInteracting = falseconst table = tableRef.valueif (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.valueif (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.valueif (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>