vue分页插件实现分页

Vue 分页插件实现方法

使用第三方库（如 vue-paginate）

安装 vue-paginate 库：

npm install vue-paginate --save

注册插件并实现分页：

// main.js
import VuePaginate from 'vue-paginate'
Vue.use(VuePaginate)

// 组件内
<template>
  <paginate
    :page-count="totalPages"
    :click-handler="handlePageChange"
    :prev-text="'上一页'"
    :next-text="'下一页'"
  ></paginate>
</template>

<script>
export default {
  data() {
    return {
      currentPage: 1,
      itemsPerPage: 10,
      totalItems: 100
    }
  },
  computed: {
    totalPages() {
      return Math.ceil(this.totalItems / this.itemsPerPage)
    }
  },
  methods: {
    handlePageChange(pageNum) {
      this.currentPage = pageNum
      this.fetchData()
    },
    fetchData() {
      // 根据 currentPage 获取数据
    }
  }
}
</script>

自定义分页组件

创建一个可复用的分页组件：

<!-- 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: currentPage === page }"
      >{{ page }}</button>
    </span>

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

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

      if (end - start + 1 < this.maxVisibleButtons) {
        start = Math.max(1, end - this.maxVisibleButtons + 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>

后端分页结合 API

与后端 API 交互实现分页：

// 在父组件中使用
<template>
  <div>
    <data-table :items="items" />
    <pagination 
      :current-page="currentPage"
      :total-pages="totalPages"
      @page-changed="onPageChange"
    />
  </div>
</template>

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

export default {
  components: { Pagination, DataTable },
  data() {
    return {
      items: [],
      currentPage: 1,
      totalPages: 0,
      totalItems: 0
    }
  },
  mounted() {
    this.fetchData()
  },
  methods: {
    async fetchData() {
      const response = await axios.get('/api/items', {
        params: {
          page: this.currentPage,
          per_page: 10
        }
      })
      this.items = response.data.data
      this.totalItems = response.data.total
      this.totalPages = Math.ceil(this.totalItems / 10)
    },
    onPageChange(page) {
      this.currentPage = page
      this.fetchData()
    }
  }
}
</script>

分页样式优化

添加过渡效果和响应式设计：

.pagination {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

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

.pagination button:hover:not(.active) {
  background: #f1f1f1;
}

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

@media (max-width: 600px) {
  .pagination button {
    padding: 3px 6px;
    margin: 0 2px;
  }
}

这些方法提供了从简单到复杂的分页实现方案，可根据项目需求选择合适的方式。第三方库适合快速实现，自定义组件灵活性更高，后端分页适合大数据量场景。