基于 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)
})
  • 在组件挂载时启动自动滚动。
  • 在组件卸载时清除定时器,防止内存泄漏。
Vue3中结合Element Plus库创建一个自动无限滚动表格,可以使用Element Plus的`el-table`组件配合分页插件`el-pagination`以及自定义事件处理。首先,你需要安装`element-plus-paginate`这个第三方库来增强Element Plus的分页功能: ```bash npm install element-plus-paginate --save ``` 然后,在你的Vue组件中,配置如下示例: ```html <template> <div> <el-pagination :total="total" @current-change="handleCurrentChange" style="position: fixed; bottom: 0; height: 45px;"></el-pagination> <el-table :data="tableData" :height="tableHeight" ref="tableRef"> <!-- 表格列定义 --> <!-- ... --> <template v-for="(item, index) in displayedData"> <!-- 行数据渲染 --> <!-- ... --> </template> </el-table> </div> </template> <script> import { ElTable, ElPagination } from &#39;element-plus&#39;; import { useInfiniteScroll } from &#39;element-plus-paginate&#39;; export default { setup() { const total = 1000; // 模拟大量数据 let currentPage = 1; let pageSize = 10; // 使用infinite-scroll指令实现无限滚动 const { tableHeight, handleScroll, resetScroll } = useInfiniteScroll({ 高度: &#39;calc(100% - 45px)&#39;, // 减去底部分页栏的高度 threshold: 0.5, // 触发加载更多时距离屏幕底部的距离比例 fetchNextPage: () => { currentPage++; // 如果需要从服务器拉取数据,这里应该替换为实际请求 setTimeout(() => { const newData = Array.from({ length: pageSize }, (_, i) => ({ key: `item-${i + (currentPage - 1) * pageSize}` })); this.tableData.push(...newData); }, 1000); // 模拟异步延迟 }, }); const tableData = []; // 初始化表格数据 const displayedData = computed(() => { return tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize); }); watch(() => currentPage, () => { handleScroll(); // 当当前页面变化时,触发滚动检查 }); onMounted(() => { resetScroll(); // 初始加载数据后重置滚动位置 }); methods: { handleCurrentChange(page) { currentPage = page; if (currentPage > 1) { handleScroll(); } }, }; return { tableHeight, displayedData, }; }, }; </script> ``` 在这个例子中,我们监听了`@current-change`事件,每次翻页都会调用`handleScroll`来检查是否需要加载更多数据。当用户滚动到底部时,会自动触发`fetchNextPage`函数加载新的数据行。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小佟Q_Q!

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值