vue+element-ui table实现滚动加载
2019-03-27 15:30
721 查看
版权声明:转载请注明出处,谢谢 https://blog.csdn.net/weixin_43953710/article/details/88846252
在main.js里注册
Vue.directive('loadmore', { bind(el, binding) { const selectWrap = el.querySelector('.el-table__body-wrapper') selectWrap.addEventListener('scroll', function() { let sign = 0 const scrollDistance = this.scrollHeight - this.scrollTop - this.clientHeight if (scrollDistance <= sign) { binding.value() } }) } })
在组件中,使用自定义的事件:
v-loadmore=“loadMore”
在methods中调用loadMore
loadMore() { console.log(this.loadSign) if(this.aq == false){ return } if(this.page == 1){ this.page++ } this.$axios({ method:'get', url:this.api+'admin/StockLevel', params:{ enabled:this.value1, page:this.page, limit:this.limit } }).then(res=>{ if(res.data.status==1){ if(res.data.result.list.length > 0){ this.page++ res.data.result.list.forEach(res => { res.enabled = res.enabled.toString() this.tableData.push(res) }); console.log('到底了', this.page) }else{ this.aq = false } } }) },
这样就实现啦!!!
相关文章推荐
- vue+axios+element ui 实现全局loading加载示例
- PHP结合Vue实现滚动底部加载效果
- vue中实现滚动加载更多
- vue实现ajax滚动下拉加载,同时具有loading效果
- vue 2 滚动条加载更多数据实现
- vue中实现滚动加载更多的示例
- vue实现ajax滚动下拉加载,同时具有loading效果(推荐)
- 基于 Vue.js 的移动端组件库mint-ui实现无限滚动加载更多
- Vue + Element UI 实现权限管理系统 前端篇(十):动态加载菜单
- vue中实现滚动加载
- Vue.js 的移动端组件库mint-ui实现无限滚动加载更多的方法
- 【vue】用WOW.js+animate.css实现页面滚动加载元素动画
- better-scroll在vue中实现原生滚动和上拉/下拉加载的效果
- Vue.js项目重构,轻松实现上拉加载滚动位置还原
- vue 2 滚动条加载更多数据实现
- Spring boot + mybatis + Vue.js + ElementUI 实现数据的增删改查实例代码(一)
- vue利用better-scroll实现通讯录式列表滚动和左右联动效果(2)
- vue脚手架加载element-ui报错的解决方法
- JavaScript实现无穷滚动加载数据
- vue 异步组件实现按需加载