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

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

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

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

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

如果要用第二种的话就用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
          );
        }
      });
    },