当前位置：首页 > VUE

vue实现表格翻页滚动

2026-02-20 17:33:19VUE

Vue 实现表格翻页滚动

使用 Element UI 的分页组件

Element UI 提供了现成的分页组件 el-pagination，结合 el-table 可以轻松实现表格翻页。通过 current-page 和 page-size 控制当前页码和每页数据量。

vue实现表格翻页滚动

<template>
  <div>
    <el-table :data="tableData" border>
      <el-table-column prop="date" label="日期"></el-table-column>
      <el-table-column prop="name" label="姓名"></el-table-column>
    </el-table>
    <el-pagination
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-size="pageSize"
      :total="total">
    </el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      currentPage: 1,
      pageSize: 10,
      total: 100
    };
  },
  methods: {
    handleCurrentChange(val) {
      this.currentPage = val;
      this.fetchData();
    },
    fetchData() {
      // 模拟数据请求
      const start = (this.currentPage - 1) * this.pageSize;
      const end = start + this.pageSize;
      this.tableData = this.allData.slice(start, end);
    }
  },
  created() {
    // 初始化数据
    this.allData = Array.from({ length: 100 }, (_, i) => ({
      date: `2023-01-${i + 1}`,
      name: `用户${i + 1}`
    }));
    this.fetchData();
  }
};
</script>

自定义滚动加载

如果需要实现滚动加载而非分页按钮，可以通过监听滚动事件动态加载数据。适用于无限滚动场景。

vue实现表格翻页滚动

<template>
  <div class="scroll-container" @scroll="handleScroll">
    <table>
      <tr v-for="item in visibleData" :key="item.id">
        <td>{{ item.name }}</td>
      </tr>
    </table>
    <div v-if="loading" class="loading">加载中...</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      allData: [],
      visibleData: [],
      loading: false,
      currentIndex: 0,
      batchSize: 20
    };
  },
  methods: {
    handleScroll(e) {
      const { scrollTop, clientHeight, scrollHeight } = e.target;
      if (scrollHeight - scrollTop - clientHeight < 50 && !this.loading) {
        this.loadMore();
      }
    },
    loadMore() {
      this.loading = true;
      setTimeout(() => {
        const nextBatch = this.allData.slice(
          this.currentIndex,
          this.currentIndex + this.batchSize
        );
        this.visibleData = [...this.visibleData, ...nextBatch];
        this.currentIndex += this.batchSize;
        this.loading = false;
      }, 500);
    }
  },
  created() {
    this.allData = Array.from({ length: 1000 }, (_, i) => ({
      id: i,
      name: `项目 ${i + 1}`
    }));
    this.loadMore();
  }
};
</script>

<style>
.scroll-container {
  height: 400px;
  overflow-y: auto;
}
.loading {
  text-align: center;
  padding: 10px;
}
</style>

使用第三方库（如 vue-infinite-loading）

对于更复杂的无限滚动需求，可以使用专门库如 vue-infinite-loading，简化滚动逻辑。

<template>
  <div>
    <table>
      <tr v-for="item in items" :key="item.id">
        <td>{{ item.name }}</td>
      </tr>
    </table>
    <infinite-loading @infinite="loadMore"></infinite-loading>
  </div>
</template>

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

export default {
  components: { InfiniteLoading },
  data() {
    return {
      items: [],
      page: 1
    };
  },
  methods: {
    loadMore($state) {
      setTimeout(() => {
        const newItems = Array.from({ length: 10 }, (_, i) => ({
          id: this.items.length + i,
          name: `新项目 ${this.items.length + i}`
        }));
        this.items = [...this.items, ...newItems];
        $state.loaded();
        if (this.items.length >= 50) $state.complete();
      }, 500);
    }
  }
};
</script>