vue实现分页页面

Vue实现分页页面

分页组件实现

创建一个独立的Pagination.vue组件，接收当前页码、总页数等参数，通过事件触发页码变化。

<template>
  <div class="pagination">
    <button 
      @click="changePage(currentPage - 1)" 
      :disabled="currentPage === 1"
    >上一页</button>

    <span v-for="page in pages" :key="page">
      <button 
        @click="changePage(page)"
        :class="{ active: page === currentPage }"
      >{{ page }}</button>
    </span>

    <button 
      @click="changePage(currentPage + 1)" 
      :disabled="currentPage === totalPages"
    >下一页</button>
  </div>
</template>

<script>
export default {
  props: {
    currentPage: Number,
    totalPages: Number,
    maxVisiblePages: {
      type: Number,
      default: 5
    }
  },
  computed: {
    pages() {
      const range = [];
      const half = Math.floor(this.maxVisiblePages / 2);
      let start = Math.max(1, this.currentPage - half);
      let end = Math.min(this.totalPages, start + this.maxVisiblePages - 1);

      if (end - start + 1 < this.maxVisiblePages) {
        start = Math.max(1, end - this.maxVisiblePages + 1);
      }

      for (let i = start; i <= end; i++) {
        range.push(i);
      }
      return range;
    }
  },
  methods: {
    changePage(page) {
      if (page >= 1 && page <= this.totalPages) {
        this.$emit('page-changed', page);
      }
    }
  }
};
</script>

<style>
.pagination {
  display: flex;
  gap: 5px;
  margin-top: 20px;
}
.active {
  background-color: #42b983;
  color: white;
}
</style>

数据分页处理

在父组件中处理数据分页逻辑，通常与API请求结合。

<template>
  <div>
    <table>
      <tr v-for="item in paginatedData" :key="item.id">
        <td>{{ item.name }}</td>
      </tr>
    </table>

    <Pagination 
      :current-page="currentPage" 
      :total-pages="totalPages"
      @page-changed="handlePageChange"
    />
  </div>
</template>

<script>
import Pagination from './Pagination.vue';

export default {
  components: { Pagination },
  data() {
    return {
      allData: [],
      currentPage: 1,
      itemsPerPage: 10
    };
  },
  computed: {
    totalPages() {
      return Math.ceil(this.allData.length / this.itemsPerPage);
    },
    paginatedData() {
      const start = (this.currentPage - 1) * this.itemsPerPage;
      const end = start + this.itemsPerPage;
      return this.allData.slice(start, end);
    }
  },
  methods: {
    handlePageChange(page) {
      this.currentPage = page;
    },
    async fetchData() {
      try {
        const response = await api.get('/items');
        this.allData = response.data;
      } catch (error) {
        console.error(error);
      }
    }
  },
  created() {
    this.fetchData();
  }
};
</script>

服务器端分页

对于大数据量，建议使用服务器端分页，减少客户端压力。

async fetchPaginatedData(page) {
  try {
    const response = await api.get('/items', {
      params: {
        page,
        limit: this.itemsPerPage
      }
    });
    this.paginatedData = response.data.items;
    this.totalItems = response.data.total;
  } catch (error) {
    console.error(error);
  }
}

分页样式优化

添加过渡效果和响应式设计提升用户体验。

.pagination button {
  padding: 5px 10px;
  border: 1px solid #ddd;
  background: white;
  cursor: pointer;
  transition: all 0.3s;
}

.pagination button:hover:not(:disabled) {
  background: #eee;
}

.pagination button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

@media (max-width: 600px) {
  .pagination {
    flex-wrap: wrap;
  }
}

分页功能扩展

添加每页显示数量选择器和跳转到指定页码功能。

<template>
  <div class="pagination-controls">
    <select v-model="itemsPerPage" @change="handleItemsPerPageChange">
      <option value="5">5条/页</option>
      <option value="10">10条/页</option>
      <option value="20">20条/页</option>
    </select>

    <input 
      type="number" 
      v-model="goToPage" 
      min="1" 
      :max="totalPages"
      @keyup.enter="handleGoToPage"
    >
    <button @click="handleGoToPage">跳转</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      goToPage: 1,
      itemsPerPage: 10
    };
  },
  methods: {
    handleItemsPerPageChange() {
      this.currentPage = 1;
      this.$emit('items-per-page-changed', this.itemsPerPage);
    },
    handleGoToPage() {
      if (this.goToPage >= 1 && this.goToPage <= this.totalPages) {
        this.$emit('page-changed', parseInt(this.goToPage));
      }
    }
  }
};
</script>