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

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

<script>
export default {
  props: {
    totalItems: {
      type: Number,
      required: true
    },
    itemsPerPage: {
      type: Number,
      default: 10
    },
    currentPage: {
      type: Number,
      default: 1
    }
  },
  computed: {
    totalPages() {
      return Math.ceil(this.totalItems / this.itemsPerPage)
    },
    pages() {
      const range = []
      for (let i = 1; i <= this.totalPages; 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
      :total-items="data.length"
      :items-per-page="itemsPerPage"
      :current-page="currentPage"
      @page-changed="handlePageChange"
    />
  </div>
</template>

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

export default {
  components: { Pagination },
  data() {
    return {
      data: [], // 从API获取的数据
      itemsPerPage: 10,
      currentPage: 1
    }
  },
  computed: {
    paginatedData() {
      const start = (this.currentPage - 1) * this.itemsPerPage
      const end = start + this.itemsPerPage
      return this.data.slice(start, end)
    }
  },
  methods: {
    handlePageChange(page) {
      this.currentPage = page
    },
    fetchData() {
      // API请求获取数据
      // this.data = response.data
    }
  },
  created() {
    this.fetchData()
  }
}
</script>

高级分页功能实现

对于大量数据的分页显示，可以添加页码省略功能：

// 在Pagination组件的computed中替换pages计算属性
pages() {
  const range = []
  const current = this.currentPage
  const total = this.totalPages
  const delta = 2 // 显示当前页前后多少页

  range.push(1)
  if (current - delta > 2) {
    range.push('...')
  }

  for (let i = Math.max(2, current - delta); i <= Math.min(total - 1, current + delta); i++) {
    range.push(i)
  }

  if (current + delta < total - 1) {
    range.push('...')
  }
  if (total > 1) {
    range.push(total)
  }

  return range
}

与后端API集成

当需要从后端获取分页数据时：

methods: {
  async fetchData() {
    try {
      const response = await axios.get('/api/items', {
        params: {
          page: this.currentPage,
          per_page: this.itemsPerPage
        }
      })
      this.data = response.data.items
      this.totalItems = response.data.total_count
    } catch (error) {
      console.error('获取数据失败:', error)
    }
  },
  handlePageChange(page) {
    this.currentPage = page
    this.fetchData()
  }
}

使用第三方库

可以考虑使用现成的分页组件库：

• v-pagination (轻量级)
• element-ui 的 el-pagination
• vuetify 的 v-pagination

安装示例（使用v-pagination）：

npm install v-pagination

使用方式：

<template>
  <pagination
    v-model="currentPage"
    :records="totalItems"
    :per-page="itemsPerPage"
    @paginate="fetchData"
  />
</template>