vue element-ui table表格滚动加载方法
更新时间：2018年03月02日 14:51:47 作者：song_zhiyin
下面小编就为大家分享一篇vue element-ui table表格滚动加载方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
添加全局注册事件，用来监听滚动事件
window.Vue.directive('loadmore', {
bind(el, binding) {
const selectWrap = el.querySelector('.el-table__body-wrapper')
selectWrap.addEventListener('scroll', function() {
let sign = 100
const scrollDistance = this.scrollHeight - this.scrollTop - this.clientHeight
if (scrollDistance <= sign) {
binding.value()
}
})
}
})
sign 用于标记位置
直接让scrollDistance === sign 并不能保证每次都会触发，所以用区间表示。后续会处理频繁触发问题。
添加事件
给需要无线加载的表格添加自定义事件，v-loadmore=”loadMore”。在methods中定义触发的事件
loadMore () {
if (this.loadSign) {
this.loadSign = false
this.page++
if (this.page > 10) {
return
}
setTimeout(() => {
this.loadSign = true
}, 1000)
console.log('到底了', this.page)
}
}
this.loadSign 用于标记page是否继续递增
以上这篇vue element-ui table表格滚动加载方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章
详解VS Code使用之Vue工程配置format代码格式化
这篇文章主要介绍了详解VS Code使用之Vue工程配置format代码格式化，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-03-03
这篇文章主要为大家详细介绍了如何利用Vue开发实现简单的滑动验证组件，并且适配移动和PC，文中的示例代码讲解详细，感兴趣的小伙伴可以了解一下2023-07-07
这篇文章主要介绍了Nuxt的动态路由和参数校验操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
这篇文章主要介绍了vue项目中icon乱码的问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-12-12
深入理解与使用keep-alive(配合router-view缓存整个路由页面)
这篇文章主要介绍了深入理解与使用keep-alive(配合router-view缓存整个路由页面)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
vue3 process.env.XXX环境变量不生效的解决方法
这篇文章主要给大家介绍了关于vue3 process.env.XXX环境变量不生效的解决方法,通过文中介绍的方法可以很方便的解决遇到的问题,对大家学习或者使用vue3具有一定的参考借鉴价值,需要的朋友可以参考下2023-08-08
毫无疑问,组件通讯是Vue中非常重要的技术之一,它的出现能够使我们非常方便的在不同组件之间进行数据的传递,以达到数据交互的效果,所以,学习组件通讯技术是非常有必要的,本文将一次解决Vue3中组件通讯的全部方式,总有你想要的那一种,需要的朋友可以参考下2024-09-09
这篇文章主要介绍了Vue2.0实现歌手列表滚动及右侧快速入口功能,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2018-08-08
下面小编就为大家分享一篇vue 组件 全局注册和局部注册的实现，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-02-02
这篇文章主要介绍了vue router如何实现tab切换，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
最新评论