vue3中用el-table懒加载表格数据

在Vue3中，Element UI的`el-table`组件提供了懒加载(lazy loading)的功能，用于分页展示大量数据，避免一次性加载所有数据导致性能问题。当你需要延迟显示非当前页面的数据时，可以使用这个特性。

首先，在`<template>`部分，设置一个`v-loading`指令来控制表格是否正在加载更多数据：

<template>
  <div>
    <el-loading :visible="isLoading" :text="loadingText"></el-loading>
    <el-table
      ref="table"
      :data="tableData"
      :load="loadMoreData"
      lazy
    ></el-table>
  </div>
</template>

然后，在`<script>`中，定义`isLoading`、`loadingText`变量以及`loadMoreData`方法：

<script setup>
import { ref } from 'vue';
import { ElTable } from 'element-plus';

const isLoading = ref(false);
const loadingText = '正在加载...';
const tableData = ref([]);

// 懒加载函数
async function loadMoreData(pageNumber) {
  isLoading.value = true;
  
  try {
    const newData = await yourAsyncDataLoadingFunction(pageNumber); // 这里替换为实际的数据获取函数
    tableData.value = [...tableData.value, ...newData];
  } catch (error) {
    console.error('Error fetching data:', error);
  } finally {
    isLoading.value = false;
  }
}
</script>

在上述代码中，`loadMoreData`接收当前的页码作为参数，从服务器获取对应页的数据并合并到已有的数据源中。当请求完成后，设置`isLoading`为`false`以停止加载动画。