vue3 中表格el-table-infinite-scroll 插件使用

<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调用部分的代码，以实现与你的后端服务的数据交互。