vue分页实现

Vue 分页实现方法

基础分页组件实现

创建一个简单的分页组件，包含上一页、下一页和页码按钮。组件接收当前页码、总页数等参数，通过事件通知父组件页码变化。

<template>
  <div class="pagination">
    <button @click="changePage(currentPage - 1)" :disabled="currentPage === 1">上一页</button>
    <button 
      v-for="page in pages" 
      :key="page" 
      @click="changePage(page)"
      :class="{ active: page === currentPage }"
    >
      {{ page }}
    </button>
    <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
    },
    maxVisibleButtons: {
      type: Number,
      default: 5
    }
  },
  computed: {
    pages() {
      const range = [];
      const half = Math.floor(this.maxVisibleButtons / 2);
      let start = Math.max(this.currentPage - half, 1);
      let end = Math.min(start + this.maxVisibleButtons - 1, this.totalPages);

      if (end - start + 1 < this.maxVisibleButtons) {
        start = Math.max(end - this.maxVisibleButtons + 1, 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 button {
  margin: 0 5px;
  padding: 5px 10px;
}
.pagination button.active {
  background-color: #42b983;
  color: white;
}
</style>

与数据列表结合使用

在父组件中使用分页组件，管理数据分页逻辑。通常需要计算总页数，并根据当前页码显示对应数据。

<template>
  <div>
    <ul>
      <li v-for="item in paginatedData" :key="item.id">{{ item.name }}</li>
    </ul>
    <pagination
      :current-page="currentPage"
      :total-pages="totalPages"
      @page-changed="onPageChange"
    />
  </div>
</template>

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

export default {
  components: {
    Pagination
  },
  data() {
    return {
      currentPage: 1,
      itemsPerPage: 10,
      allData: [] // 假设这是从API获取的所有数据
    };
  },
  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: {
    onPageChange(page) {
      this.currentPage = page;
    }
  },
  async created() {
    // 模拟API调用获取数据
    this.allData = await fetchData();
  }
};
</script>

服务器端分页实现

对于大数据量情况，通常采用服务器端分页。只需传递当前页码和每页条数给API，由服务器返回对应数据。

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

使用第三方库

现有成熟的Vue分页库可以快速实现分页功能，如vuejs-paginate或v-pagination。

安装vuejs-paginate:

npm install vuejs-paginate

使用示例:

<template>
  <paginate
    :page-count="totalPages"
    :click-handler="onPageChange"
    :prev-text="'<'"
    :next-text="'>'"
    :container-class="'pagination'"
  />
</template>

<script>
import Paginate from 'vuejs-paginate';

export default {
  components: {
    Paginate
  },
  // 其余逻辑与自定义组件类似
};
</script>

分页样式优化

为分页组件添加更多样式和功能，如显示总条数、跳转到指定页等。

<div class="pagination-container">
  <span>共 {{ totalItems }} 条</span>
  <select v-model="itemsPerPage" @change="onPageSizeChange">
    <option value="10">10条/页</option>
    <option value="20">20条/页</option>
    <option value="50">50条/页</option>
  </select>
  <input 
    type="number" 
    v-model.number="goToPage" 
    min="1" 
    :max="totalPages"
    @keyup.enter="onGoToPage"
  >
  <button @click="onGoToPage">跳转</button>
  <!-- 分页组件 -->
</div>

通过以上方法可以实现灵活多样的Vue分页功能，根据项目需求选择适合的实现方式。