vue监听element-ui的table表格滚动事件

vue监听element-ui的table表格滚动事件

这篇文章主要是讲述“如何监听element-ui table滚动事件”，按我自己尝试的方法去实现。

需求分析：
前两天做项目遇到一个问题，数据量大，然后表格渲染的很慢，而且很卡怎么办？有什么优化的方式？
那无非就是两种方法。

1. 先加载一屏表格的数据，之后触底加载新的数据，或者快触底的时候再加载新的数据。
2. 做分页，也是加载一页，要是看其他的数据，就自己点击去看。

如果要用第二种的话就用element-ui里边的分页组件，去实现就好，我用的第一种方法实现的。
template里边的代码我就不写了，你们可以直接用element-ui里面的table，也可以自己封装。

tableScroll(){// 获取需要绑定的tablethis.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
          );}});},