vue3中的分页器分页但从后端申请过来的数据并没有分页

在 Vue3 中，你可以使用一个自定义的计算属性来实现前端分页。具体步骤如下：

1. 在你的组件中定义一个变量 `currentPage` 用来记录当前页码，以及 `pageSize` 用来记录每页展示的数据条数。

2. 在 `mounted` 钩子函数中，使用 `axios` 或者其他方式从后端获取数据，并将数据存储在一个变量中，比如 `listData`。

3. 定义一个计算属性 `pagedList`，该属性会根据当前页码和每页展示的数据条数对 `listData` 进行分页，返回当前页需要展示的数据。

computed: {
  pagedList() {
    const start = (this.currentPage - 1) * this.pageSize;
    const end = start + this.pageSize;
    return this.listData.slice(start, end);
  }
}

4. 在组件中使用 `pagedList` 来展示当前页的数据，同时使用 `v-for` 循环展示页码，以便用户进行翻页操作。

<ul>
  <li v-for="page in pageCount" :key="page">
    <a @click="currentPage = page">{{ page }}</a>
  </li>
</ul>
<table>
  <tr v-for="item in pagedList" :key="item.id">
    <td>{{ item.name }}</td>
    <td>{{ item.age }}</td>
  </tr>
</table>

其中，`pageCount` 是一个计算属性，用来计算总共需要展示多少页。

computed: {
  pageCount() {
    return Math.ceil(this.listData.length / this.pageSize);
  }
}

以上就是在 Vue3 中实现前端分页的基本步骤。注意，该方式只是将后端返回的所有数据进行了分页展示，而并没有在后端进行分页处理。如果需要在后端进行分页处理，可以在请求后端数据时添加相应的参数来指定需要获取的页码、每页数据条数等信息。