vue实现数据分页代码

以下是一个基本的Vue数据分页示例：

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>Name</th>
          <th>Email</th>
          <th>Phone</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(user, index) in pagedUsers" :key="index">
          <td>{{ user.id }}</td>
          <td>{{ user.name }}</td>
          <td>{{ user.email }}</td>
          <td>{{ user.phone }}</td>
        </tr>
      </tbody>
    </table>
    <div class="pagination">
      <button @click="prevPage">Prev</button>
      <span v-for="page in totalPage" :key="page">
        <button :class="{ active: page === currentPage }" @click="setCurrentPage(page)">{{ page }}</button>
      </span>
      <button @click="nextPage">Next</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      users: [], // 所有用户数据
      currentPage: 1, // 当前页码
      pageSize: 10, // 每页数据量
    };
  },
  computed: {
    // 计算总页数
    totalPage() {
      return Math.ceil(this.users.length / this.pageSize);
    },
    // 根据当前页码和每页数据量计算分页后的用户数据
    pagedUsers() {
      const startIndex = (this.currentPage - 1) * this.pageSize;
      const endIndex = startIndex + this.pageSize;
      return this.users.slice(startIndex, endIndex);
    },
  },
  methods: {
    // 切换到上一页
    prevPage() {
      if (this.currentPage > 1) {
        this.currentPage--;
      }
    },
    // 切换到下一页
    nextPage() {
      if (this.currentPage < this.totalPage) {
        this.currentPage++;
      }
    },
    // 设置当前页码
    setCurrentPage(page) {
      this.currentPage = page;
    },
  },
  mounted() {
    // 获取所有用户数据
    // 这里假设已经获取到了 users 数据
    // 可以是从接口获取，或者直接写死的静态数据
    this.users = [
      { id: 1, name: "Tom", email: "tom@example.com", phone: "1234567890" },
      { id: 2, name: "Jerry", email: "jerry@example.com", phone: "0987654321" },
      // ...
    ];
  },
};
</script>

在这个示例中，我们首先定义了三个数据属性：

- `users`：存放所有用户数据的数组。
- `currentPage`：当前页码。
- `pageSize`：每页数据量。

然后，我们定义了两个计算属性：

- `totalPage`：根据 `users` 和 `pageSize` 计算出总页数。
- `pagedUsers`：根据 `currentPage` 和 `pageSize` 计算出当前页的用户数据。

最后，我们定义了三个方法：

- `prevPage`：切换到上一页。
- `nextPage`：切换到下一页。
- `setCurrentPage`：设置当前页码。

在 `mounted` 钩子中，我们可以获取所有用户数据，这里简单地用静态数据来模拟。

在模板中，我们使用 `v-for` 指令来展示分页后的用户数据。同时，我们也使用了计算属性 `totalPage` 和 `pagedUsers` 来展示页码和分页后的用户数据。最后，我们使用了两个按钮来切换上一页和下一页，并展示了所有页码。