vue实现分页

Vue 实现分页通常需要以下几个步骤：

1. 定义分页组件的基本结构，包括页码、上一页、下一页等元素。
2. 定义分页组件的属性，包括当前页码、每页显示的数据条数、总数据条数等。
3. 定义分页组件的方法，包括计算总页数、生成页码列表等。
4. 在页面中使用分页组件，并传入相应的属性和方法。

下面是一个简单的 Vue 分页组件实现示例：

<template>
  <div class="pagination">
    <ul>
      <li v-if="currentPage > 1" @click="prevPage"><a href="#">上一页</a></li>
      <li v-for="page in pages" :class="{ active: page === currentPage }" @click="gotoPage(page)"><a href="#">{{ page }}</a></li>
      <li v-if="currentPage < pageCount" @click="nextPage"><a href="#">下一页</a></li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    currentPage: {
      type: Number,
      default: 1
    },
    pageSize: {
      type: Number,
      default: 10
    },
    total: {
      type: Number,
      default: 0
    }
  },
  computed: {
    // 计算总页数
    pageCount() {
      return Math.ceil(this.total / this.pageSize);
    },
    // 生成页码列表
    pages() {
      const pages = [];
      for (let i = 1; i <= this.pageCount; i++) {
        pages.push(i);
      }
      return pages;
    }
  },
  methods: {
    // 上一页
    prevPage() {
      this.$emit('page-change', this.currentPage - 1);
    },
    // 下一页
    nextPage() {
      this.$emit('page-change', this.currentPage + 1);
    },
    // 跳转到指定页码
    gotoPage(page) {
      this.$emit('page-change', page);
    }
  }
};
</script>

在上面的代码中，我们定义了一个名为 `pagination` 的分页组件，它接受三个属性：`currentPage` 表示当前页码，`pageSize` 表示每页显示的数据条数，`total` 表示总数据条数。我们通过计算属性 `pageCount` 计算总页数，并通过 `pages` 方法生成页码列表。在点击上一页、下一页或页码时，我们触发相应的方法，通过 `$emit` 事件传递页码给父组件进行数据请求。在父组件中，我们可以通过监听 `page-change` 事件来实现分页查询数据。