vue element table 触底加载下一页

可以使用 element-ui 的 el-table 组件的 @load 事件来实现触底加载下一页的功能，具体实现可以参考以下代码：

<template>
<el-table :data="tableData" @load="handleLoad">
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
</el-table>
</template>

<script>
export default {
data() {
return {
tableData: [],
currentPage: 1,
pageSize: 10
}
},
methods: {
handleLoad() {
// 判断是否已经加载完所有数据
if (this.tableData.length >= 100) {
return;
}
// 模拟异步加载数据
setTimeout(() => {
// 每次加载10条数据
const newData = Array.from({ length: this.pageSize }, (_, index) => ({
name: `用户${this.tableData.length + index + 1}`,
age: Math.floor(Math.random() * 30) + 20
}));
this.tableData = [...this.tableData, ...newData];
this.currentPage++;
}, 1000);
}
}
}
</script>