在使用Element UI的表格（el-table）进行滚动加载时，你可以监听表格的滚动事件，并在用户滚动到表格底部时触发加载更多数据的操作。以下是一个简单的例子：
<template>
<el-table
:data="tableData"
height="400"
@scroll="handleScroll"
v-loading="loading"
>
<!-- 列配置 -->
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [],
loading: false,
page: 1,
pageSize: 10,
total: 0,
};
},
methods: {
fetchData() {
this.loading = true;
// 模拟异步请求数据
setTimeout(() => {
// 这里应该是发起请求获取数据
const start = (this.page - 1) * this.pageSize;
const end = start + this.pageSize;
this.tableData = Array.from({ length: this.pageSize }, (_, i) => ({
id: start + i,
name: `Name ${start + i}`,
// ...其他数据
}));
this.total = 100; // 假设总数据量为100
this.loading = false;
}, 1000);
},
handleScroll(event) {
const target = event.target;
// 检查是否滚动到底部
if (target.scrollHeight - target.scrollTop <= target.clientHeight) {
if (this.tableData.length < this.total) {
this.page += 1;
this.fetchData();
}
}
}
},
mounted() {
this.fetchData();
}
};
</script>在这个例子中，我们设置了表格的height属性，使其可以滚动。当表格滚动到底部时，我们通过监听scroll事件来判断并加载更多数据。fetchData方法用于异步获取数据，并模拟了一个请求过程。在实际应用中，你需要替换这部分代码以发起真实的网络请求，并处理返回的数据。