您好,欢迎访问一九零五行业门户网

element-ui如何操作table滚动效果

这次给大家带来element-ui如何操作table滚动效果,element-ui操作table滚动的注意事项有哪些,下面就是实战案例,一起来看一下。
添加全局注册事件,用来监听滚动事件
window.vue.directive('loadmore', {  bind(el, binding) {  const selectwrap = el.queryselector('.el-tablebody-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中使用compass
集成ueditor富文本编辑器的方法
以上就是element-ui如何操作table滚动效果的详细内容。
其它类似信息

推荐信息