el-table中使用懒加载

在Element UI的el-table组件中，懒加载（Lazy Loading）是一种常用的优化技术，主要用于大数据量表格展示，当数据太多无法一次性加载时，它允许你在用户滚动到某一行时才去异步获取该行的数据。这样可以显著减少初始加载时间，并提高用户体验。

在`el-table`中实现懒加载通常需要以下几个步骤：

1. 配置表头：设置`row-key`属性，用于唯一标识每一行数据，以及`load`函数作为懒加载的回调，这个函数会在用户滚动到底部触发并返回新的数据。

<template>
  <el-table :data="tableData" row-key="id" :lazy="true">
    <el-table-column prop="name" label="姓名"></el-table-column>
    <!-- 更多列... -->
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      isLoading: false,
    };
  },
  methods: {
    load(row) {
      this.isLoading = true;
      setTimeout(() => {
        // 模拟异步加载数据
        const newData = ...; // 从服务器或其他地方获取新数据
        this.tableData.push(...newData);
        this.isLoading = false;
      }, 2000); // 假设请求延迟2秒
    }
  }
};
</script>