分页用vue实现

实现分页的步骤

在Vue中实现分页功能，可以通过计算属性、v-for指令和事件处理来完成。以下是具体的实现方法。

数据准备

确保有一个数据数组和分页相关的变量。通常需要当前页码、每页显示数量和总数据量。

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);
  }
}

渲染分页数据

在模板中使用v-for渲染当前页的数据。

<ul>
  <li v-for="item in paginatedItems" :key="item.id">
    {{ item.name }}
  </li>
</ul>

渲染分页控件

创建一个分页控件，允许用户切换页码。

<div class="pagination">
  <button 
    @click="currentPage = currentPage - 1" 
    :disabled="currentPage === 1"
  >
    上一页
  </button>
  <span>第 {{ currentPage }} 页 / 共 {{ totalPages }} 页</span>
  <button 
    @click="currentPage = currentPage + 1" 
    :disabled="currentPage === totalPages"
  >
    下一页
  </button>
</div>

添加页码跳转

如果需要直接跳转到指定页码，可以添加一个输入框。

<input 
  type="number" 
  v-model.number="currentPage" 
  min="1" 
  :max="totalPages" 
/>
<button @click="goToPage">跳转</button>

methods: {
  goToPage() {
    if (this.currentPage < 1) this.currentPage = 1;
    if (this.currentPage > this.totalPages) this.currentPage = this.totalPages;
  }
}

样式优化

为分页控件添加基本样式，提升用户体验。

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
}
button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

完整示例

将上述代码整合为一个完整的Vue组件。

<template>
  <div>
    <ul>
      <li v-for="item in paginatedItems" :key="item.id">
        {{ item.name }}
      </li>
    </ul>
    <div class="pagination">
      <button 
        @click="currentPage = currentPage - 1" 
        :disabled="currentPage === 1"
      >
        上一页
      </button>
      <span>第 {{ currentPage }} 页 / 共 {{ totalPages }} 页</span>
      <button 
        @click="currentPage = currentPage + 1" 
        :disabled="currentPage === totalPages"
      >
        下一页
      </button>
    </div>
    <input 
      type="number" 
      v-model.number="currentPage" 
      min="1" 
      :max="totalPages" 
    />
    <button @click="goToPage">跳转</button>
  </div>
</template>

<script>
export default {
  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: {
    goToPage() {
      if (this.currentPage < 1) this.currentPage = 1;
      if (this.currentPage > this.totalPages) this.currentPage = this.totalPages;
    }
  }
}
</script>

<style>
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
}
button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
</style>

使用第三方库

如果需要更复杂的分页功能，可以考虑使用第三方库如vue-paginate或v-pagination。

安装v-pagination：

npm install v-pagination

使用示例：

<template>
  <div>
    <ul>
      <li v-for="item in paginatedItems" :key="item.id">
        {{ item.name }}
      </li>
    </ul>
    <pagination 
      v-model="currentPage" 
      :records="items.length" 
      :per-page="itemsPerPage" 
      @paginate="updatePage"
    />
  </div>
</template>

<script>
import Pagination from 'v-pagination';
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);
    }
  },
  methods: {
    updatePage(page) {
      this.currentPage = page;
    }
  }
}
</script>

通过以上方法，可以在Vue中实现灵活且功能完善的分页功能。