vue element ui 表格下拉加载

### 实现 Vue Element UI 表格下拉加载更多数据

为了实现在 Vue 中使用 Element UI 组件库创建具有下拉加载更多功能的数据表格，可以采用分页逻辑结合滚动事件监听的方式。具体来说：

通过 `el-table` 组件展示初始部分数据，并设置一个标志位用于判断是否还有更多数据可加载[^4]。

data() {
  return {
    tableData: [], // 存储显示的数据列表
    loading: false, // 控制加载状态
    hasMore: true, // 是否存在更多数据待加载
    page: 1, // 当前请求的页码
    pageSize: 20 // 每次加载的数量
  };
}

在页面初始化时调用接口获取首批数据显示于表格内；同时为窗口对象添加滚动事件监听器，当检测到接近底部时触发新的异步请求增加新一批记录至现有集合中并更新视图。

<template>
  <div style="height: calc(100vh - 160px);" @scroll="handleScroll">
    <!-- 数据表格 -->
    <el-table :data="tableData" height="calc(100% - 50px)">
      ...
    </el-table>

    <!-- 加载提示符 -->
    <p v-if="loading">正在加载...</p>
  </div>
</template>

对于滚动事件处理函数而言，需先确认当前并非处于加载状态下才继续执行后续操作，防止重复提交查询请求造成不必要的资源浪费。此外还需注意边界条件——即已无剩余未读取项可供追加，则应移除相应侦听机制以免影响用户体验。

methods: {
  handleScroll(event) {
    const scrollTop = event.target.scrollTop;
    const clientHeight = event.target.clientHeight;
    const scrollHeight = event.target.scrollHeight;

    if (scrollTop + clientHeight >= scrollHeight && !this.loading && this.hasMore) {
      this.loadMore();
    }
  },

  async loadMore() {
    try {
      this.loading = true; // 开始加载
      
      let response = await fetch(`/api/data?page=${this.page}&size=${this.pageSize}`);
      let result = await response.json();

      if(result.length === 0){
        this.hasMore = false; // 如果返回为空则表示已经全部加载完毕
      }else{
        this.tableData.push(...result);
        this.page++;
      }

    } catch(error) {
      console.error('Error fetching more data:', error);

    } finally {
      this.loading = false; // 结束加载
    }
  }
}

上述代码片段展示了如何利用 JavaScript 原生特性配合 Vue 及其生态工具链完成动态增量渲染效果，从而达到优化性能的目的。