1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > el-table滚动加载数据;vue自定义指令监听el-table的滚动事件 达到滚动条滚动到底部

el-table滚动加载数据;vue自定义指令监听el-table的滚动事件 达到滚动条滚动到底部

时间:2022-09-11 23:03:39

相关推荐

el-table滚动加载数据;vue自定义指令监听el-table的滚动事件 达到滚动条滚动到底部

首先在vue项目中的main.js文件添加一个监听el-table滚动条事件的自定义指令,以供全局使用

// 监听el-table滚动Vue.directive('loadmore', {bind(el, binding) {const selectWrap = el.querySelector('.el-table__body-wrapper')selectWrap.addEventListener('scroll', function() {let sign = 0const scrollDistance = this.scrollHeight - this.scrollTop - this.clientHeight - 1if (scrollDistance <= sign) {binding.value()}})}})

在el-table标签上加上定义在全局的滚动指令,v-loadmore=“自定义名”

<el-table ref="tableData"v-loadmore="loadMore"v-loading="loading":data="tableData"borderstripe>...</el-table>

在使用到el-table的页面中的methods方法中使用该自定义指令对应的函数名。

// 表格滚动加载事件loadMore() {console.log('触发滚动加载事件')}

el-table滚动加载数据;vue自定义指令监听el-table的滚动事件 达到滚动条滚动到底部加载新数据

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。