Element-UI InfiniteScroll 无限滚动组件：解决表格卡顿与分页替代方案

作者：霁月

时间：2026-10-30

本文介绍 Element-UI 的 InfiniteScroll 无限滚动组件，旨在解决大数据量表格导致的页面卡顿问题，并提供无需分页的滑动加载方案。通过 v-infinite-scroll 指令实现数据动态加载，配合 disabled 控制加载状态，适用于后端返回大量数据需前端全量展示的场景。

文章目录

应用场景

在某些业务场景中，用户可能不希望使用传统的分页功能，而是期望通过滑动到底部来加载更多数据。此外，当后端返回的数据量较大，需要在前端单页展示时，若直接使用 Element-UI 的 table 组件，往往会导致页面渲染卡顿（因为element-ui的table组件将所有的dom元素都渲染在页面上了）。

代码

<template>
  <div class="app">
    <ul
      class="infinite-list"
      v-infinite-scroll="loadMore"
      infinite-scroll-disabled="disabled"
      infinite-scroll-distance="50"
      style="overflow: auto"
    >
      <li v-for="(i, index) in count" :key="index" class="infinite-list-item">
        {{ i }}
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      count: 20,
    };
  },
  methods: {
    // 加载更多时追加数据
    loadMore() {
      console.log("load");
      this.count += 2;
    },
  },
  computed: {
    // 控制是否能加载更多
    disabled() {
      return this.count >= 30;
    },
  },
};
</script>
<style scoped>
.infinite-list {
  height: 200px;
  background-color: skyblue;
}
</style>

关于 Element-UI InfiniteScroll 无限滚动组件的基本使用介绍至此结束。如需了解更多相关内容，欢迎查阅本站过往文章或继续浏览后续教程，感谢大家的支持！