vue监听element-ui的table表格滚动事件方式
作者：好 运.
本文详细介绍了如何监听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
);
}
});
},
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。