目标是做一个向下滚动时到底自动加载的table效果。
实现的思想其实很简单，就是获取到table里的tbody，然后滚动时计算下滚动高度，差不多到底了就加载更多。
因为之前也做过类似的功能，所以都是把代码直接拿过来用的。
用的是ElementUI，ref写在了el-table节点上。
但是一开始的时候会报addEventListener的错误。后来查了一下vue.$refs。发现vue.$refs可以获取两种节点，一种是直接的DOM节点，另一种情况是当把‘ref=xxx’放在子组件上的时候vue.$ref获取到的就是这个子组件并可以使用子组件的属性和方法。
那么我当然是想直接获取到tbody节点了。一开始我是想着有什么方法跳过子组件直接获取到目标节点，不过很遗憾，我失败了。于是乎我就想着怎么通过子组件获取到目标节点。可能我也是比较笨拙吧
我就这么一点一点找的。不过也还好，找到了，就是在$el下面。那么我就可以找到我想要的目标节点了，接下来的问题就简单了，直接贴上代码吧。

    scroll(){
      setTimeout(() => {
        this.box = this.$refs.dataTable.$el.children[2];
        console.log(this.$refs.dataTable)
        this.box.addEventListener('scroll', () => {
          
          const clientHeight = this.box.clientHeight;
          const scrollTop = this.box.scrollTop;
          const scrollHeight = this.box.scrollHeight;
          if (clientHeight >= scrollHeight - (scrollTop + 30) && !this.dataLoading) {
            console.log('到底了')
            this.dataLoading = true;
            setTimeout(() => {
              this.tableData.push({dataDate:'2019 10-11 23:23:25', measureSeconds:'58s'},{dataDate:'2019 10-11 23:23:25', measureSeconds:'58s'},{dataDate:'2019 10-11 23:23:25', measureSeconds:'58s'},{dataDate:'2019 10-11 23:23:25', measureSeconds:'58s'},{dataDate:'2019 10-11 23:23:25', measureSeconds:'58s'})
              this.dataLoading = false;
            }, 1000);
          }
        }, false);
      }, 500);
    }

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://fly63.com/article/detial/6806