目标是做一个向下滚动时到底自动加载的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);
}
使用 React 时,我们的默认思维方式应该是 不会强制修改 DOM ,而是通过传入 props 重新渲染组件。但是,有些情况却无法避免修改 DOM 。React 中的 Refs 提供了一种访问 render() 方法
在vue的项目中做图片上传时,我通过上传图片后获取到input中的files属性将其进行处理,然后将其转换为base64传给后台。这个方法用在非v-for上动态生成的ref上时
Refs 提供了一种方式,允许我们访问 DOM 节点或在 render 方法中创建的 React 元素。在某些情况下,我们需要在典型数据流之外强制修改子组件,被修改的子组件可能是一个 React 组件的实例
大多数情况下,props前递可以解决一切问题,但是依然有需要触达React实例或者Dom节点的情况,这时候应该使用React Ref。React.forwardRef((props,ref)=><Compnent>)
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!