vue监听element-ui的table表格滚动事件方式
更新时间：2026年06月24日 09:34:24 作者：好 运.
本文详细介绍了如何监听Element-UI表格滚动事件,并提出两种数据加载优化方案,通过事件监听实现平滑加载,提升用户体验
vue监听element-ui的table表格滚动事件
这篇文章主要是讲述“如何监听element-ui table滚动事件”，按我自己尝试的方法去实现。
需求分析
前两天做项目遇到一个问题，数据量大，然后表格渲染的很慢，而且很卡怎么办？有什么优化的方式？
无非就是两种方法
- 先加载一屏表格的数据，之后触底加载新的数据，或者快触底的时候再加载新的数据。
- 做分页，也是加载一页，要是看其他的数据，就自己点击去看。
如果要用第二种的话就用element-ui里边的分页组件，去实现就好，我用的第一种方法实现的。
template里边的代码我就不写了，你们可以直接用element-ui里面的table，也可以自己封装。
tableScroll() {
// 获取需要绑定的table
this.dom = this.$refs.table.bodyWrapper;
this.dom.addEventListener("scroll", () => {
// 滚动距离
let scrollTop = this.dom.scrollTop;
// 变量windowHeight是可视区的高度
let windowHeight = this.dom.clientHeight || this.dom.clientHeight;
// 变量scrollHeight是滚动条的总高度
let scrollHeight = this.dom.scrollHeight || this.dom.scrollHeight;
// 这里是触底 自己按自己业务需求是写逻辑
if (scrollTop + windowHeight === scrollHeight) {
// 获取到的不是全部数据 当滚动到底部 继续获取新的数据
console.log(
"scrollTop",
scrollTop + "windowHeight",
windowHeight + "scrollHeight",
scrollHeight
);
}
});
},
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
Vue纯前端使用exceljs导出excel文件的完整图文教程
这篇文章将一步一步为大家详细介绍一下exceljs插件中的使用,以及如何使用exceljs导出excel文件,感兴趣的小伙伴可以跟随小编一起学习一下2025-03-03
vue在 for 循环里使用异步调用 async/await的方法
大家都遇到这样的问题,在使用函数的async/await异步调用时候,放在正常函数中单个调用时没有问题的,但是await放在forEach()循环里面就会报错,本文给大家介绍vue 如何在 for 循环里面使用异步调用 async/await,感兴趣的朋友一起看看吧2023-10-10
在本篇文章里小编给大家整理了一篇关于vue中对虚拟dom的理解知识点总结内容，有兴趣的朋友们可以学习参考下。2021-06-06
随着用vue3 的开发者越来越多，其必定是又她一定的有带你，接下来这篇文章小编就为大家介绍vue3 对比 vue2 有什么优点？感兴趣的小伙伴请跟小编一起阅读下文吧2021-09-09
本文主要介绍了Vue里循环form表单项实例，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
本文主要介绍了在Vue中使用TypeScript的几种方式,包括通过<script lang="ts">结合defineComponent,使用Composition API + <script setup lang="ts">和TypeScript定义Props和Emits类型,下面就来详细的介绍一下2026-05-05
这篇文章主要介绍了Vue从TodoList中学父子组件通信，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-02-02
这篇文章主要介绍了vue2.0 如何把子组件的数据传给父组件,需要的朋友可以参考下2018-01-01
每次路由发生变化时都需要调用一次路由守卫，并且store中的数据会在每次刷新的时候清空，因此需要判断store中是否有添加的动态路由，本文给大家分享vue中根据用户权限动态添加路由的问题，感兴趣的朋友一起看看吧2021-11-11
项目中后台返回的时间有多种形式,时间戳、ISO标准时间格式等，我们需要转化展示成能看的懂得时间格式,下面这篇文章主要给大家介绍了关于vue时间格式总结以及转换方法的相关资料,需要的朋友可以参考下2022-12-12
最新评论