【VUE】el-table表格 实现滚动到底部加载更多数据
废话不多说，直接上代码
部分代码
{{ row.project_name }}
{{ row.progress_percentage }}
{{ row.contract_signing_amount }}
{{ row.info }}
提交
= 50"
slot="append"
style="margin-top: 10px;margin-bottom: 10px;text-align: center;font-size: 15px;">
{{ content }}
其他部分的代码
data() {
return {
listLoading: false, // Loading状态
tableData: [], // 表格展示数据
allData: [], // 接口返回的所有表格数据
currentPage: 1, // 第几页
pageSize: 50, // 每页展示多少条
reload: 0,
}
},
mounted() {
// 表格添加滚动事件
this.$refs.myTable.bodyWrapper.addEventListener('scroll', this.handleScroll)
},
beforeDestroy() {
// 销毁滚动事件
this.$refs.myTable.bodyWrapper.removeEventListener('scroll', this.handleScroll)
},
watch: {
allData: {
deep: true,
immediate: true,
handler(newValue) {
const currentPage = this.currentPage || 1
const total = currentPage * this.pageSize
this.tableData = newValue.slice(0, total)
}
},
// 强制刷新变量
reload() {
this.total = this.allData.length
this.currentPage = 0
this.$refs.myTable.bodyWrapper.scrollTop = 0
this.fetchData()
this.loop()
}
},
methods: {
// 滚动加载下一页，将下一页数据和之前数据进行累加
handleScroll(event) {
const { scrollTop, scrollHeight, clientHeight } = event.target
if (Math.ceil(scrollTop) + clientHeight >= scrollHeight) {
// 如果数据已全部加载，则跳出
if (this.tableData.length == this.total) {
return
}
this.fetchData()
}
},
fetchData() {
this.currentPage += 1
const start = (this.currentPage - 1) * this.pageSize
const end = start + this.pageSize
const newData = this.allData.slice(start, end)
this.tableData =
this.currentPage == 1 ? newData : this.tableData.concat(newData)
},
// 如果滚动高度小于可视范围高度，则继续加载下一页，直至可视区域填充满
loop() {
this.$nextTick(() => {
const { scrollHeight, clientHeight } = this.$refs.myTable.bodyWrapper
if (scrollHeight && clientHeight && scrollHeight <= clientHeight) {
if (this.tableData.length == this.total) {
return
}
this.fetchData()
this.loop()
}
})
},
},
