vxe-grid 按需加载怎么弄

### vxe-grid 实现按需加载 在 `vxe-grid` 组件中实现按需加载（也称为懒加载），通常涉及到分页、虚拟滚动以及当用户滚动到特定位置时触发的数据加载机制。为了达到这一目的，可以利用 `vxe-grid` 提供的相关属性和事件来控制数据的获取时机。 对于分页场景下的按需加载，可以通过设置 `pager-config` 属性配置分页器，并监听 `page-change` 事件，在每次切换页面时发起新的数据请求[^1]： ```javascript methods: { handlePageChange ({ currentPage, pageSize }) { this.loading = true; fetchData({ page: currentPage, limit: pageSize }).then(({ data }) => { this.tableData = data.list; this.totalCount = data.total; this.loading = false; }); } } ``` 针对无限滚动或虚拟列表形式的按需加载，则可借助 `scroll-load` 或者自定义滚动条逻辑配合 `load-data` 方法完成。这里给出基于 `scroll-load` 的简单例子[^2]: ```html <vxe-grid ... :scroll="{ y: '400px' }" @scroll="handleScroll"> </vxe-grid> ``` ```javascript data () { return { loading: false, hasMore: true, loadIndex: 0 }; }, methods: { async handleScroll ({ scrollTop, scrollHeight, clientHeight }) { const bottomOffset = 50; // 距离底部多少像素开始加载更多 if (scrollTop + clientHeight >= scrollHeight - bottomOffset && !this.loading && this.hasMore) { await loadData(); } }, async loadData() { try { this.loadIndex++; this.loading = true; let res = await fetch(`api/data?page=${this.loadIndex}`); let { items, total } = await res.json(); if (!items.length || this.loadIndex * 20 >= total) { this.hasMore = false; } this.data.push(...items); } catch(error){ console.error('Failed to load more data', error); } finally{ this.loading = false; } } } ``` 上述代码片段展示了如何通过监听滚动事件并判断是否接近容器底部来决定何时调用服务器端接口拉取新一批记录。需要注意的是实际项目里可能还需要考虑诸如防抖动处理等问题以优化用户体验[^3]。 另外一种方式是在初始化表格时只加载部分初始数据显示给用户看，之后随着用户的操作逐步增加可见区域内的行数直到全部展示完毕为止；这种方式特别适合那些拥有大量固定高度行的情况，因为它能有效减少初次渲染所需时间从而加快响应速度[^4]。