Vue：从前端获取已分页数据后如何完整选择所有选项

jiezi

2 月前

在前端开发中，我们经常需要从数据库或其他数据源获取大量数据，并将其展示给用户。如果这些数据是按页进行分页的，那么我们需要编写一些代码来处理分页数据和渲染所有选项。以下是一个示例，说明如何使用 Vue.js 框架从前端获取已分页的数据后完整选择所有选项。

首先，假设我们有一个名为 userList 的数组，它包含了用户列表的数据。每个用户的对象可以包含用户名、电子邮件和年龄等属性。

javascript const userList = [ {id: 1, name: 'John', email: 'john@example.com', age: 30}, {id: 2, name: 'Alice', email: 'alice@example.com', age: 25}, // 更多用户数据... ];

接下来，我们将编写一个 Vue 组件来处理分页功能和渲染所有选项。

假设我们的项目中有一个名为 pages/components/userList.vue 的文件，这是我们用于显示用户的组件。这个组件将继承自PageComponent（这是一个基础的 Vue 页面模板），并在其中添加用户列表数据。

“`html

        <!-- 每页显示的数量 -->
        <input type="number" v-model.number="perPage" min="1" max="20"></input>

        <!-- 显示用户列表的循环标签 -->
        <li v-for="user in filteredUsers" :key="user.id">
            <!-- 选项按钮，点击后跳转到个人详情页面 -->
            <button v-on:click="$emit('detail', user)"> 详细信息 </button>
            {{user.name}} (年龄：{{ user.age}}岁)
        </li>

        <!-- 分页下拉菜单 -->
        <div class="pagination">
            <!-- 上一页按钮，用于显示前几页的用户列表 -->
            <a v-on:click="$emit('prevPage')"><</a>
            <!-- 当前页号 -->
            <span> 当前：{{currentPage}}</span>
            <!-- 页码下拉菜单 -->
            <ul class="page-numbers">
                <!-- 从 1 开始，到分页数量之间 -->
                <li v-for="pageNumber in totalPages" :key="pageNumber">{{pageNumber}}</li>
            </ul>
            <!-- 下一页按钮，用于显示下几页的用户列表 -->
            <a v-on:click="$emit('nextPage')">></a>
        </div>
    </ul>
</div>

Vue 项目结构