背景
有的时候我们表格的数据不想使用分页组件展示，想要显示所有的数据，但是显示所有数据会导致服务器负荷严重(比如CPU过载)，我们可以使用懒加载的形式，此方式利用监听是否滚动到元素底部，如果到元素底部就去请求下一页的数据
原理
效果图
示例代码
<template><div class="app"><!-- 思路：表格设置固定高度默认加载10条数据对表格容器进行滚动事件的监听，监听是否到达底部，如果到达底部则往表格追加数据--><h1>表格-懒加载</h1><el-table:data="table_data"borderstyle="width: 100%"height="400"ref="tableRef"><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 {data() {return {table_data: [],// 获取第几条数据开始，然后取多少条query_info: {start: 0,limit: 10,},table_total: 0,}},created() {this.fetchPersonData()},mounted() {this.setTableLazyLoading()},methods: {fetchPersonData() {const params = {...this.query_info,}// 模拟服务器返回的数据getPeronList(params).then(() => {const data = []// 这里是模拟的可以不用管，到时服务端是会返回正确的数据for (let i = this.query_info.start;i < this.query_info.start + this.query_info.limit;i++) {data.push({date: '2024-05-09',name: `测试${i}`,address: 'gz',})}// 假设返回的总数this.table_total = 54this.table_data.push(...data)})function getPeronList() {return new Promise((resolve, reject) => {setTimeout(() => {resolve()}, 300)})}},setTableLazyLoading() {const table_el = this.$refs.tableRef.$elconst dom = table_el.querySelector('.el-table__body-wrapper')dom.addEventListener('scroll', () => {const bottom_distance =dom.scrollHeight - dom.scrollTop - dom.offsetHeight// console.log('距离底部的距离:', bottom_distance)if (bottom_distance == 0 && this.query_info.start <= this.table_total) {this.query_info.start = this.query_info.start + this.query_info.limitthis.fetchPersonData()}})},},
}
</script><style lang="less" scoped></style>参考文档
- https://blog.csdn.net/Seven71111/article/details/120739925
