vue+element-ui:vue自定义指令监听el-table的滚动事件,达到滚动条滚动到底部加载新数据。
1.首先在vue项目中的main.js文件添加一个监听el-table滚动条事件的自定义指令,以供全局使用。// 准备一个滚动加载指令Vue.directive('loadmore', {bind(el, binding) {const selectWrap = el.querySelector('.el-table__body-wrapper')selectWrap.addEventListen
·
1.首先在vue项目中的main.js文件添加一个监听el-table滚动条事件的自定义指令,以供全局使用。
// 准备一个滚动加载指令
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()
}
})
}
})
// 在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()
}
})
}
})
2.在el-table标签上加上定义在全局的滚动指令,v-loadmore=“自定义名”
// 准备一个滚动加载指令
<!-- 图片列表 -->
<el-table
ref="tableData"
v-loadmore="loadMore"
v-loading="loading"
:data="tableData"
border
stripe
>...</el-table>
//v-loadmore为自定义指令
<!-- 图片列表 -->
<el-table
ref="tableData"
v-loadmore="loadMore"
v-loading="loading"
:data="tableData"
border
stripe
>...</el-table>
3.在使用到el-table的页面中的methods方法中使用该自定义指令对应的函数名。
// 表格滚动加载事件
loadMore() {
console.log('触发滚动加载事件')
}
// 表格滚动加载事件
loadMore() {
console.log('触发滚动加载事件')
}
4.坑!!!本篇在某些电脑上可能会遇到触发不了loadMore的情况,可以输出main.js自定义指令的中的scrollDistance(如下图),
观察其滚到最底部的距离是否是0,如果不是0,可以修改sign值大于滚到最底部距离的值即可。
更多推荐
已为社区贡献4条内容
所有评论(0)