vue+element-ui table实现滚动加载
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
在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
}
}
})
},
这样就实现啦!!!
GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:3 个月前 )
c345bb45
7 个月前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 7 个月前
更多推荐
已为社区贡献14条内容
所有评论(0)