elementplus Table懒加载

Element Plus是基于Vue.js的开源UI组件库，其Table组件支持懒加载（Lazy Loading），这意味着当数据量较大，一次性加载所有数据可能会导致性能问题。通过懒加载功能，只有当用户滚动到某个部分时，才会请求并显示那一部分的数据。

在Element Plus的Table中，实现懒加载通常需要以下几个步骤：

1. 配置列：在`table`组件的列配置项中，设置`load`属性为一个函数，这个函数会在需要时异步加载数据。

<el-table :data="lazyData" :load="loadMore">
   <el-table-column prop="name" label="姓名"></el-table-column>
   <!-- ... -->
</el-table>

2. 定义`loadMore`函数：在这个函数里，你可以添加分页逻辑，比如从服务器获取更多数据，并处理返回结果。

export default {
  data() {
    return {
      lazyData: [], // 初始数据为空数组
      loading: false, // 加载状态标志
      pageSize: 10, // 每页显示数量
      currentPage: 1, // 当前页数
    };
  },
  methods: {
    async loadMore() {
      this.loading = true;
      const res = await fetchMoreData(this.currentPage); // 假设这是一个异步操作
      if (res) {
        this.lazyData.push(...res.data);
        this.currentPage++;
      } else {
        this.$refs.table.doLayout(); // 如果无更多数据，调整表格布局
      }
      this.loading = false;
    },
  },
};