vue 实现简单分页

实现分页的基本思路

在Vue中实现分页功能通常需要以下几个核心部分：数据列表、当前页码、每页显示数量、计算总页数、分页导航组件。以下是具体实现方法。

数据准备与分页计算

定义一个数据数组和分页相关变量，通常放在Vue组件的data或setup中：

data() {
  return {
    items: [],         // 原始数据列表
    currentPage: 1,    // 当前页码
    itemsPerPage: 10   // 每页显示数量
  }
}

计算属性用于获取当前页的数据和总页数：

computed: {
  paginatedItems() {
    const start = (this.currentPage - 1) * this.itemsPerPage
    const end = start + this.itemsPerPage
    return this.items.slice(start, end)
  },
  totalPages() {
    return Math.ceil(this.items.length / this.itemsPerPage)
  }
}

分页导航组件

创建一个分页导航组件，包含页码按钮和导航控制：

<template>
  <div class="pagination">
    <button 
      @click="prevPage" 
      :disabled="currentPage === 1"
    >
      上一页
    </button>

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

    <button 
      @click="nextPage" 
      :disabled="currentPage === totalPages"
    >
      下一页
    </button>
  </div>
</template>

<script>
export default {
  props: {
    currentPage: Number,
    totalPages: Number
  },
  computed: {
    pageRange() {
      const range = []
      for (let i = 1; i <= this.totalPages; i++) {
        range.push(i)
      }
      return range
    }
  },
  methods: {
    prevPage() {
      this.$emit('page-changed', this.currentPage - 1)
    },
    nextPage() {
      this.$emit('page-changed', this.currentPage + 1)
    },
    goToPage(page) {
      this.$emit('page-changed', page)
    }
  }
}
</script>

主组件集成

在主组件中使用分页功能：

<template>
  <div>
    <!-- 显示分页后的数据 -->
    <ul>
      <li v-for="item in paginatedItems" :key="item.id">
        {{ item.name }}
      </li>
    </ul>

    <!-- 分页导航 -->
    <pagination
      :current-page="currentPage"
      :total-pages="totalPages"
      @page-changed="handlePageChange"
    />
  </div>
</template>

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

export default {
  components: {
    Pagination
  },
  data() {
    return {
      items: Array.from({ length: 100 }, (_, i) => ({ id: i, name: `Item ${i}` })),
      currentPage: 1,
      itemsPerPage: 10
    }
  },
  computed: {
    paginatedItems() {
      const start = (this.currentPage - 1) * this.itemsPerPage
      const end = start + this.itemsPerPage
      return this.items.slice(start, end)
    },
    totalPages() {
      return Math.ceil(this.items.length / this.itemsPerPage)
    }
  },
  methods: {
    handlePageChange(page) {
      this.currentPage = page
    }
  }
}
</script>

样式优化

添加基本样式改善分页导航外观：

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

.pagination button {
  margin: 0 5px;
  padding: 5px 10px;
  cursor: pointer;
}

.pagination button.active {
  background-color: #42b983;
  color: white;
}

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

高级分页功能

对于大型数据集，可以考虑以下优化：

实现页码范围限制，只显示当前页附近的页码：

pageRange() {
  const range = []
  const maxVisible = 5
  let start = Math.max(1, this.currentPage - Math.floor(maxVisible / 2))
  let end = Math.min(this.totalPages, start + maxVisible - 1)

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

  for (let i = start; i <= end; i++) {
    range.push(i)
  }

  return range
}

添加省略号表示更多页码：

<span v-if="pageRange[0] > 1">...</span>
<span v-for="page in pageRange" :key="page">
  <button @click="goToPage(page)" :class="{ active: page === currentPage }">
    {{ page }}
  </button>
</span>
<span v-if="pageRange[pageRange.length - 1] < totalPages">...</span>

服务器端分页

对于大数据集，建议实现服务器端分页：

methods: {
  async fetchData(page) {
    const response = await axios.get('/api/items', {
      params: {
        page,
        per_page: this.itemsPerPage
      }
    })
    this.items = response.data.items
    this.totalItems = response.data.total
  },
  handlePageChange(page) {
    this.currentPage = page
    this.fetchData(page)
  }
}

服务器端应返回分页后的数据和总数，前端只需维护当前页码状态。