vue前端分页

// Vue前端分页示例代码

<template>
  <div>
    <!-- 分页数据展示区域 -->
    <ul>
      <li v-for="item in paginatedData" :key="item.id">{{ item.name }}</li>
    </ul>

    <!-- 分页按钮 -->
    <div>
      <button @click="prevPage" :disabled="currentPage === 1">上一页</button>
      <span>第 {{ currentPage }} 页 / 共 {{ totalPages }} 页</span>
      <button @click="nextPage" :disabled="currentPage === totalPages">下一页</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 假设这是从后端获取的数据
      allData: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' },
        { id: 4, name: 'Item 4' },
        { id: 5, name: 'Item 5' },
        { id: 6, name: 'Item 6' },
        { id: 7, name: 'Item 7' },
        { id: 8, name: 'Item 8' },
        { id: 9, name: 'Item 9' },
        { id: 10, name: 'Item 10' }
      ],
      itemsPerPage: 3, // 每页显示的条目数
      currentPage: 1 // 当前页码
    };
  },
  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: {
    // 上一页
    prevPage() {
      if (this.currentPage > 1) {
        this.currentPage--;
      }
    },
    // 下一页
    nextPage() {
      if (this.currentPage < this.totalPages) {
        this.currentPage++;
      }
    }
  }
};
</script>

<style scoped>
/* 简单样式 */
ul {
  list-style-type: none;
  padding: 0;
}

li {
  margin: 5px 0;
}

button {
  margin: 5px;
}
</style>

解释说明：

• 模板部分 (<template>):

  • 使用 v-for 指令遍历 paginatedData，即当前页的数据，并将其渲染为列表项。
  • 提供了两个按钮用于切换页面（上一页和下一页），并展示了当前页码和总页数。

• 脚本部分 (<script>):

  • data() 中定义了原始数据 allData、每页显示的条目数 itemsPerPage 和当前页码 currentPage。
  • computed 属性中计算了总页数 totalPages 和当前页的数据 paginatedData。
  • methods 中定义了切换页面的方法 prevPage 和 nextPage。

• 样式部分 (<style scoped>):

  • 提供了一些简单的样式来美化列表和按钮。