<template>
<el-table
:data="tableData"
height="400"
border
@scroll="handleScroll"
>
<!-- 列配置 -->
</el-table>
</template>
<script setup>
import { ref } from 'vue';
const tableData = ref([]);
const isLoading = ref(false);
const pageIndex = ref(1);
const pageSize = ref(10);
// 模拟获取数据的函数
const fetchData = async () => {
if (isLoading.value) return;
isLoading.value = true;
try {
// 这里应该是调用API获取数据的地方
const newData = await fetchMoreData(pageIndex.value, pageSize.value);
tableData.value = tableData.value.concat(newData);
pageIndex.value++;
} catch (error) {
console.error('Error fetching data:', error);
} finally {
isLoading.value = false;
}
};
// 滚动事件处理函数
const handleScroll = (event) => {
const target = event.target;
if (target.scrollHeight - target.scrollTop <= target.clientHeight) {
fetchData();
}
};
// 模拟数据获取函数，应该替换为实际的API调用
const fetchMoreData = (pageIndex, pageSize) => {
return new Promise((resolve) => {
// 模拟延迟
setTimeout(() => {
const newItems = Array.from({ length: pageSize }, (_, i) => ({
id: (pageIndex - 1) * pageSize + i,
name: `Item ${pageIndex * pageSize + i}`,
// 其他字段...
}));
resolve(newItems);
}, 1000); // 模拟网络延迟
});
};
// 初始化数据
fetchData();
</script>这个示例展示了如何在Vue 3中使用Element Plus库的el-table组件实现无限滚动的表格功能。它包括了表格滚动到底部时自动加载更多数据的逻辑，并使用模拟的API调用来获取数据。在实际应用中，你需要替换fetchMoreData函数以及API调用部分的代码，以实现与你的后端服务的数据交互。