当前位置：首页 > VUE

vue表格实现自动加载

2026-01-20 22:19:54VUE

Vue 表格自动加载实现方法

监听滚动事件实现自动加载

通过监听表格容器的滚动事件，判断是否滚动到底部触发加载更多数据。适用于固定高度的表格容器。

<template>
  <div class="table-container" @scroll="handleScroll">
    <table>
      <!-- 表格内容 -->
    </table>
    <div v-if="loading">加载中...</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: false,
      page: 1,
      total: 0,
      list: []
    }
  },
  methods: {
    handleScroll(e) {
      const container = e.target
      const scrollBottom = container.scrollHeight - container.scrollTop - container.clientHeight
      if (scrollBottom < 50 && !this.loading && this.list.length < this.total) {
        this.loadMore()
      }
    },
    loadMore() {
      this.loading = true
      this.page++
      // 调用API获取数据
      fetchData(this.page).then(res => {
        this.list = [...this.list, ...res.data]
        this.total = res.total
        this.loading = false
      })
    }
  }
}
</script>

<style>
.table-container {
  height: 500px;
  overflow-y: auto;
}
</style>

使用 Intersection Observer API

利用现代浏览器支持的Intersection Observer API检测元素是否进入视口，实现更高效的自动加载。

<template>
  <div>
    <table>
      <!-- 表格内容 -->
    </table>
    <div ref="loader" v-if="hasMore">
      <span v-if="loading">加载中...</span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: false,
      hasMore: true,
      page: 1,
      list: []
    }
  },
  mounted() {
    this.initObserver()
  },
  methods: {
    initObserver() {
      const observer = new IntersectionObserver((entries) => {
        if (entries[0].isIntersecting && !this.loading && this.hasMore) {
          this.loadMore()
        }
      })
      observer.observe(this.$refs.loader)
    },
    loadMore() {
      this.loading = true
      this.page++
      fetchData(this.page).then(res => {
        this.list = [...this.list, ...res.data]
        this.hasMore = res.hasMore
        this.loading = false
      })
    }
  }
}
</script>

使用第三方库实现

对于复杂场景，可以考虑使用现成的无限滚动库如vue-infinite-loading，简化开发流程。

安装依赖：

npm install vue-infinite-loading

使用示例：

<template>
  <div>
    <table>
      <!-- 表格内容 -->
    </table>
    <infinite-loading @infinite="loadMore">
      <div slot="spinner">加载中...</div>
      <div slot="no-more">没有更多数据了</div>
    </infinite-loading>
  </div>
</template>

<script>
import InfiniteLoading from 'vue-infinite-loading'

export default {
  components: { InfiniteLoading },
  data() {
    return {
      page: 1,
      list: []
    }
  },
  methods: {
    loadMore($state) {
      fetchData(this.page).then(res => {
        if (res.data.length) {
          this.list = [...this.list, ...res.data]
          this.page++
          $state.loaded()
        } else {
          $state.complete()
        }
      })
    }
  }
}
</script>

优化性能的注意事项