pagination在vue中全局布局

在Vue.js中，Pagination通常指分页功能，它帮助我们在大量数据展示时按页面划分显示内容，避免一次性加载过多数据导致性能问题。Vue中实现全局布局的Pagination一般会放在Vue实例的`components`选项里，这样可以在任何需要的地方复用这个分页组件。

首先，创建一个分页组件，例如`Pagination.vue`：

<template>
  <div class="pagination">
    <button :disabled="currentPage === 1" @click="prevPage">上一页</button>
    <span>{{ currentPage }}</span> / {{ totalPages }}
    <button :disabled="currentPage === totalPages" @click="nextPage">下一页</button>
  </div>
</template>

<script>
export default {
  props: {
    totalItems: { type: Number, required: true },
    itemsPerPage: { type: Number, required: true },
    currentPage: { type: Number, default: 1 }
  },
  methods: {
    prevPage() {
      this.currentPage--;
    },
    nextPage() {
      this.currentPage++;
    }
  }
}
</script>

然后，在Vue的全局配置文件如main.js中，将该组件注册为全局组件：

import Pagination from './components/Pagination.vue'

Vue.component('pagination', Pagination)

接下来，在需要分页的地方使用`<pagination>`标签，并传递相应的数据属性：

<div v-for="(item, index) in paginatedData.slice((currentPage - 1) * itemsPerPage, currentPage * itemsPerPage)" :key="index">
  <!-- item内容 -->
</div>
<pagination :total-items="totalItems" :items-per-page="itemsPerPage" :current-page="currentPage" />

在这里，`paginatedData`是一个包含所有数据的对象数组，通过计算属性处理分页。