el-table 懒加载重新加载

`el-table` 是 Element UI 中的一个表格组件，它支持懒加载（lazy loading），即当数据量很大，一次性加载所有数据可能会导致性能问题时，我们可以只加载当前页面可见的数据，其他数据在用户滚动到时再动态请求并渲染。

在 `el-table` 的懒加载功能中，通常会配合分页和滚动事件来实现。步骤如下：

1. 配置 table 组件：设置 `data` 属性为空数组，或者一个包含 `loading` 状态的对象数组，例如 `{total: total, list: []}`。`total` 表示总记录数，`list` 初始为空。

<template>
  <el-table :data="tableData" lazy-load="loadData" @scroll="loadMore">
    <!-- ... -->
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: { total: 0, list: [] },
      currentPage: 1,
      pageSize: 10, // 每页显示多少条数据
    };
  },
  methods: {
    async loadData(row) {
      const { id } = row;
      const newData = await fetchData(id); // 获取单行数据的异步操作
      return newData; // 返回获取到的具体数据
    },
    loadMore() {
      if (this.tableData.total === this.currentPage * this.pageSize) {
        return; // 数据已加载完
      }
      this.currentPage++;
      const start = (this.currentPage - 1) * this.pageSize;
      const end = start + this.pageSize;
      const slicedData = this.tableData.list.slice(start, end);
      this.$set(this.tableData, 'list', slicedData);
    },
  },
};
</script>

2. 当滚动到底部时，触发 `loadMore` 方法，根据当前页码加载更多数据，并更新 `tableData`。