Vue3 + Ant Design Vue 实现表格无限滚动加载（自定义指令版）

随着前端应用对数据量的需求越来越大，传统的分页加载方式在展示大量数据时可能显得不够流畅。本文将结合 Vue3 和 Ant Design Vue，深入讲解如何使用 自定义指令实现表格的无限滚动加载，并分享一些性能优化与实践经验。

💡效果展示

• 页面初始显示固定数量的数据；

• 当表格滚动到底部时，自动加载下一页数据；

• 提供 加载中、已加载全部 状态提示；

• 支持异步请求，兼容 Promise。

---

一、前言

在实际项目中，我们经常会遇到以下需求：

1. 表格数据量大，分页加载操作繁琐。

2. 用户希望在滚动时动态加载数据，实现“懒加载”效果。

3. 需要对表格滚动性能进行优化，保证界面流畅。

本文将通过一个完整的示例，展示如何在 Vue3 + Ant Design Vue 表格中实现无限滚动加载，并提供优化方案。

---

二、技术栈介绍

• Vue3：采用 Composition API，提供更灵活的响应式能力。

• Ant Design Vue：提供丰富的 UI 组件，支持表格、分页、表单等功能。

• 自定义指令：允许我们直接操作 DOM，实现滚动监听和数据加载。

---

三、实现原理

无限滚动加载的核心思路如下：

1. 监听滚动事件：当表格滚动到底部时，触发数据加载。

2. 异步请求数据：根据当前页码或数据偏移量向后端请求新数据。

3. 数据拼接：将新数据追加到现有表格数据中。

4. 性能优化：避免重复请求、控制滚动事件频率、防抖处理。

流程图如下：

表格滚动事件 → 检查滚动位置 → 满足条件 → 异步请求数据 → 数据追加 → 更新表格

---

​​​​四、实现思路

1. 封装一个 v-loadMore 自定义指令，监听表格容器的 scroll 事件；

2. 在滚动到指定位置时触发加载函数；

3. 通过 allLoaded 标志位控制加载终止；

4. 提供防抖机制，避免频繁触发滚动计算。

---

五、完整代码

1. 自定义指令：loadMore.js

import { nextTick } from 'vue'
// =======================
// 防抖函数
// =====