vue2element-ui表格每次点开都懒加载

在 Vue2 中结合 Element UI 使用懒加载(lazy loading)技术来优化表格组件的性能，主要是针对大数据量的情况，当用户滚动到表格下方时才加载新的数据行，而不是一开始就一次性加载所有数据。Element UI 提供了丰富的表格组件 `el-table`，你可以通过以下几个步骤实现懒加载：

1. 设置 `data` 列表为一个空数组，然后添加一个虚拟滚动区域（`v-loading` 或者 `load` 属性），表明数据正在加载中。

<template>
  <el-table :data="tableData" v-loading="loading">
    <!-- 表格列 -->
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [], // 初始化为空数组
      loading: true, // 懒加载默认显示加载状态
      pageSize: 10, // 分页大小
      currentPage: 1, // 当前页数
    };
  },
  methods: {
    loadMore() {
      this.loading = true; // 显示加载状态

      // 模拟异步请求
      setTimeout(() => {
        const start = (this.currentPage - 1) * this.pageSize;
        const end = start + this.pageSize;
        const newData = ...// 根据需要从服务器获取的数据，例如 API 调用
        this.tableData.push(...newData.slice(start, end));
        this.loading = false; // 加载完成隐藏加载状态
      }, 1000);
    }
  },
  created() {
    // 如果有初始数据，这里可以设置一下
    if (initialData) {
      this.tableData = initialData;
      this.loading = false; // 隐藏加载状态
    }
  },
  mounted() {
    // 用户滚动到底部触发加载更多
    window.addEventListener('scroll', () => {
      if (
        document.body.scrollTop + document.documentElement.scrollTop
          === document.documentElement.offsetHeight ||
        document.documentElement.clientHeight + document.body.scrollTop
          >= document.documentElement.offsetHeight
      ) {
        this.loadMore();
      }
    });
  },
};
</script>