当前位置：首页 > VUE

vue实现table静态分页

2026-02-24 12:54:29VUE

Vue 实现 Table 静态分页

基础实现

使用 Vue 的 v-for 和计算属性对前端数据进行分页处理。假设数据存储在 dataList 中，通过 currentPage 和 pageSize 控制分页。

<template>
  <div>
    <table>
      <tr v-for="item in paginatedData" :key="item.id">
        <td>{{ item.name }}</td>
        <td>{{ item.value }}</td>
      </tr>
    </table>
    <button @click="prevPage" :disabled="currentPage === 1">上一页</button>
    <span>{{ currentPage }} / {{ totalPages }}</span>
    <button @click="nextPage" :disabled="currentPage === totalPages">下一页</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dataList: [...], // 原始数据
      currentPage: 1,
      pageSize: 10
    };
  },
  computed: {
    totalPages() {
      return Math.ceil(this.dataList.length / this.pageSize);
    },
    paginatedData() {
      const start = (this.currentPage - 1) * this.pageSize;
      const end = start + this.pageSize;
      return this.dataList.slice(start, end);
    }
  },
  methods: {
    prevPage() {
      if (this.currentPage > 1) this.currentPage--;
    },
    nextPage() {
      if (this.currentPage < this.totalPages) this.currentPage++;
    }
  }
};
</script>

分页组件封装

将分页逻辑抽离为可复用的组件，通过 props 传递数据和配置。

<!-- Pagination.vue -->
<template>
  <div class="pagination">
    <button @click="changePage(currentPage - 1)" :disabled="currentPage === 1">
      上一页
    </button>
    <span>{{ currentPage }} / {{ totalPages }}</span>
    <button 
      @click="changePage(currentPage + 1)" 
      :disabled="currentPage === totalPages"
    >
      下一页
    </button>
  </div>
</template>

<script>
export default {
  props: {
    currentPage: { type: Number, required: true },
    totalPages: { type: Number, required: true }
  },
  methods: {
    changePage(page) {
      this.$emit('page-change', page);
    }
  }
};
</script>

使用第三方库

若需要更复杂的分页功能（如页码跳转），可使用 element-ui 或 ant-design-vue 等现成组件。

<template>
  <el-pagination
    :current-page="currentPage"
    :page-size="pageSize"
    :total="dataList.length"
    @current-change="handlePageChange"
  />
</template>

<script>
export default {
  methods: {
    handlePageChange(page) {
      this.currentPage = page;
    }
  }
};
</script>

性能优化

对于大数据量场景，使用虚拟滚动（如 vue-virtual-scroller）替代传统分页。

<template>
  <RecycleScroller
    :items="dataList"
    :item-size="50"
    key-field="id"
  >
    <template v-slot="{ item }">
      <div>{{ item.name }}</div>
    </template>
  </RecycleScroller>
</template>