antdv的表格组件如何实现滚动加载下一页数据

最新推荐文章于 2025-09-26 01:52:02 发布

原创最新推荐文章于 2025-09-26 01:52:02 发布 · 1.2k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端 #javascript #anti-design-vue

文章介绍了在antdv的表格组件没有内置滚动事件的情况下，如何通过监听外层父元素的滚动事件来自定义实现数据加载。当滚动到底部时，调用loadNextPage方法获取新数据，并使用$forceUpdate强制更新视图，以解决数据不显示的问题。注意，$forceUpdate的使用应视具体场景而定。

由于antdv的组件中没有可以直接用的滚动事件，但由于某些业务我们不得不使用他的表格组件，所以这里就需要我们自己来解决实现滚动请求数据。

并且由于antdv的表格组件内部使用了虚拟滚动技术，无法通过ref获取到Table组件的原生dom节点，所以这里使用的方法是在表格外层加一个父元素。

给父元素一个固定高度，并开启溢出滚动

methods: {
    onScroll(e) {
      const { target } = e;
      // 如果滚动到底部，且没有正在加载下一页数据，则执行 loadNextPage 方法
      if (target.scrollTop + target.clientHeight === target.scrollHeight && !this.isLoading) {
        this.isLoading = true;
        this.loadNextPage().then(() => {
          this.isLoading = false;
        });
      }
    },
    async loadNextPage() {
      this.currentPage++;
      const nextPageData = await axios.get(`/api/data?page=${this.currentPage}`);
      this.dataSource = this.dataSource.concat(nextPageData);
    },
}

代码写到这里应该可以解决大部分问题，但是不同的项目环境也可能不一样，有些小伙伴写到这里可能会出现数据更新，但是视图不更新的情况，所以这里可以加一句$forceUpdate() 方法来强制更新视图，否则加载的新数据不会被渲染出来。

|
 async loadNextPage() {
   this.currentPage++;
   const nextPageData = await axios.get(`/api/data?page=${this.currentPage}`);
   this.dataSource = this.dataSource.concat(nextPageData);
   this.$forceUpdate();  // 强制更新视图
 },

需要注意的是，能否调用 $forceUpdate 方法也取决于具体的场景，有时候可能会存在更好的解决方案。