前言
Vue自定义指令监听el-table的滚动事件,滚动到底部加载更多数据
一、第一种方式
main.js
import Vue from 'vue'
Vue.directive('loadmore', {
bind(el, binding) {
const selectWrap = el.querySelector('.el-table__body-wrapper')
selectWrap.addEventListener('scroll', function () {
let sign = 3
const scrollDistance = this.scrollHeight - this.scrollTop - this.clientHeight
if (Math.ceil(scrollDistance) <= sign) {
binding.value()
}
})
},
})
<template>
<div>
<el-table v-loadmore="loadMore" :data="tableData.slice(0, rangeNumber)" height="60vh" border style="width: 100%">
<el-table-column prop="date" label="日期" width="180"></el-table-column>
<el-table-column prop="name" label="姓名" width="180"></el-table-column>
<el-table-column prop="address" label="地址"></el-table-column>
</el-table>
</div>
</template>
<script>
export default {
name: 'Test',
data() {
return {
tableData: [],
rangeNumber: 15,
}
},
created() {
},
methods: {
loadMore() {
//加载更多逻辑代码
},
},
},
}
</script>
<style lang="scss" scoped></style>
二、第二种方式
<el-table
:data="DataList"
:show-header="false"
row-class-name="table-row-class"
height="500"
ref="table1"
@row-click="rowClick">
</el-table>
this.$refs.table1.bodyWrapper.addEventListener('scroll', (res) => {
const height = res.target
const clientHeight = height.clientHeight
const scrollTop = height.scrollTop
const scrollHeight = height.scrollHeight
if (clientHeight + scrollTop === scrollHeight) {
this.listQuery.pageNo++
this.listAuthPage()
}
}, true)