一、 el - table上设置ref属性ref = “table”
<el-table :data="workforceTemDataCurrect"
border
v-loading="tableLoading"
style="width: 100%"
height="100%"
ref="table">
</el-table>
二、 因为操作dom所以用到生命周期钩子mounted
mounted() {
// 获取需要绑定的table
this.dom = this.$refs.table.bodyWrapper
this.dom.addEventListener('scroll', () => {
// 表格滚动条滚动的距离
let scrollTop = this.dom.scrollTop
// 变量windowHeight是可视区的⾼度
// let windowHeight = this.dom.clientHeight
// 变量scrollHeight是滚动条的总⾼度
let scrollHeight = this.dom.scrollHeight
let clientHeight = this.dom.clientHeight
let scrollBottom = scrollHeight - scrollTop - clientHeight
if (scrollBottom < 1) { // 这里就是滚动条滚动到底部的时候
// 获取到的不是全部数据当滚动到底部继续获取新的数据
// 这里记住我们要把表格渲染的数据和获取到的全部数据分开, 等滑动到底部时我们在取10或者20条添加到渲染数据上
if (this.workforceTemDataAll.length <= this.workforceTemDataCurrect.length) return // 因为我们默认都是渲染20条数据,如果总数据没那么多就直接return出去
this.loading = true // 开启loading效果防止渲染速度慢用户乱点,导致页面崩溃
if (this.workforceTemDataCurrect.length + 10 > this.workforceTemDataAll.length) {
// 如果workforceTemDataAll和workforceTemDataCurrect选差没有十条那么就全部渲染上去
this.dom.scrollTop = this.dom.scrollTop - 30 // 30 50 都行
this.workforceTemDataCurrect.push(...this.workforceTemDataAll)
} else {
this.dom.scrollTop = this.dom.scrollTop - 30
let id = this.workforceTemDataCurrect.length
// 这里取10条,渲染上去 拿多少数据循环多少次就行
for (let index = id - 1; index <= id + 9; index++) { // 没有用forEach 因为场景不同这里用 forEach 效率会低
this.workforceTemDataCurrect.push(this.workforceTemDataAll[index])
}
}
setTimeout(() => {
this.loading = false
}, 500)
}
})
}
注意在子组件中调用时要使用$nextTick函数