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表格滚动加载方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章
这篇文章主要为大家详细介绍了Vue的底层原理，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2022-02-02
vue perfect-scrollbar(特定框架里使用非该框架定制库/插件)
这篇文章主要为大家介绍了vue perfect-scrollbar在特定框架里使用一款并非为该框架定制的库/插件如何实现，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪<BR>2023-05-05
这篇文章主要介绍了Vue获取微博授权URL代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-11-11
vue.js分页中单击页码更换页面内容的方法(配合spring springmvc)
下面小编就为大家分享一篇vue.js分页中单击页码更换页面内容的方法(配合spring springmvc)，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-02-02
这篇文章主要介绍了vue中使用Tinymce的示例,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-08-08
这篇文章主要介绍了vue键盘事件点击事件加native操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
用面向对象的思维去理解Vue组件，可以将所有的事物都抽象为对象，而类或者说是组件，都具有属性和操作。这篇文章主要介绍了尝试用面向对象思维理解Vue组件,需要的朋友可以参考下2021-07-07
element表格翻页第2页从1开始编号(后端从0开始分页)
这篇文章主要介绍了element表格翻页第2页从1开始编号(后端从0开始分页)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-12-12
本篇文章主要介绍了详解Vue中使用v-for语句抛出错误的解决方案，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-05-05
关于element-ui resetFields重置方法无效问题及解决
这篇文章主要介绍了关于element-ui resetFields重置方法无效问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
最新评论