vue中关于$refs获取子组件的DOM节点方法

更新日期: 2019-10-12阅读: 4.3k标签: refs

目标是做一个向下滚动时到底自动加载的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://www.fly63.com/article/detial/6806

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!