vue监听element-ui的table表格滚动事件
这篇文章主要是讲述“如何监听element-ui table滚动事件”,按我自己尝试的方法去实现。
需求分析:
前两天做项目遇到一个问题,数据量大,然后表格渲染的很慢,而且很卡怎么办?有什么优化的方式?
那无非就是两种方法。文章来源:https://www.toymoban.com/news/detail-525584.html
- 先加载一屏表格的数据,之后触底加载新的数据,或者快触底的时候再加载新的数据。
- 做分页,也是加载一页,要是看其他的数据,就自己点击去看。
如果要用第二种的话就用element-ui里边的分页组件,去实现就好,我用的第一种方法实现的。
template里边的代码我就不写了,你们可以直接用element-ui里面的table,也可以自己封装。文章来源地址https://www.toymoban.com/news/detail-525584.html
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监听element-ui的table表格滚动事件的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!