【VUE项目实战】24、分页效果实现

article/2025/10/22 22:55:29

接上篇《23、改造状态列的显示效果》
上一篇我们实现了状态列的显示效果以及插槽形式定义操作列的渲染,本篇我们来实现用户列表的分页效果。我们要在用户数据列表的左下方加入一个分页组件:

Element-UI为我们提供了“Pagination分页”组件,我们选择功能最全的分页组件:

样例代码如下:

<template><div class="block"><span class="demonstration">完整功能</span><el-pagination@size-change="handleSizeChange"@current-change="handleCurrentChange":current-page="currentPage4":page-sizes="[100, 200, 300, 400]":page-size="100"layout="total, sizes, prev, pager, next, jumper":total="400"></el-pagination></div>
</template><script>export default {methods: {handleSizeChange(val) {console.log(`每页 ${val} 条`);},handleCurrentChange(val) {console.log(`当前页: ${val}`);}},data() {return {currentPage1: 5,currentPage2: 5,currentPage3: 5,currentPage4: 4};}}
</script>

这里“@size-change”指定的是切换“每页显示xx条”的时候触发的方法;“@current-change”即只要页码值发生了变化,就会触发该属性的方法;“current-page”显示当前的页数;“page-sizes”是“每页显示xx条”的选择框;“page-size”是当前选中的每页多少条;“layout”指我们需要的翻页组件(total是数据总量, sizes是页数, prev向前翻页, pager显示页数, next向后翻页, jumper直接跳转组件);“total”是总页数。

我们复制该组件进行修改,代码如下:

<template><div><!-- 面包屑导航 --><el-breadcrumb separator-class="el-icon-arrow-right"><el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item><el-breadcrumb-item>用户管理</el-breadcrumb-item><el-breadcrumb-item>用户列表</el-breadcrumb-item></el-breadcrumb><!-- 卡片视图 --><el-card><el-row :gutter="20"><!-- gutter是指定每个分栏的间隔 --><!-- 分栏一共占24格,给搜索框7格,添加按钮4格 --><el-col :span="7"><!-- 搜索与添加区域 --><el-input placeholder="请输入内容"><el-button slot="append" icon="el-icon-search"></el-button></el-input></el-col><el-col :span="4"><el-button type="primary">添加用户</el-button></el-col></el-row><el-table :data="userList" border stripe><!-- 带边框、斑马纹 --><el-table-column type="index"></el-table-column><el-table-column label="姓名" prop="username"></el-table-column><el-table-column label="邮箱" prop="email"></el-table-column><el-table-column label="电话" prop="mobile"></el-table-column><el-table-column label="角色" prop="role_name"></el-table-column><el-table-column label="状态" prop="mg_state"><template slot-scope="scope"><el-switch v-model="scope.row.mg_state"active-color="#13ce66"inactive-color="#ff4949"></el-switch></template></el-table-column><el-table-column label="操作" width="200px"><template slot-scope="{}"><!-- 放置修改、删除和分配角色按钮 --><el-tooltip effect="dark" content="修改" placement="top"><el-button type="primary" icon="el-icon-edit" size="mini"></el-button></el-tooltip><el-tooltip effect="dark" content="删除" placement="top"><el-button type="danger" icon="el-icon-delete" size="mini"></el-button></el-tooltip><el-tooltip effect="dark" content="分配角色" placement="top"><el-button type="warning" icon="el-icon-setting" size="mini"></el-button></el-tooltip></template></el-table-column></el-table><!-- 分页区域 --><el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange":current-page="queryInfo.pagenum" :page-sizes="[1, 2, 5, 10]" :page-size="queryInfo.pagesize" layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination></el-card></div>
</template><script>
export default {data() {return {//获取用户列表的参数对象queryInfo: {query: "",pagenum: 1, //当前的页数pagesize: 2, //每页的数量},userList : [],total: 0};},created() {this.getUsersList();},methods: {async getUsersList() {const { data: res } = await this.$http.get("users", {params: this.queryInfo,});if(res.meta.status!=200){return this.$message.error("获取用户列表失败!");}console.log(res);this.userList = res.data.users;this.total = res.data.total;},//监听 pagesize 改变的事件handleSizeChange(newSize){console.log(newSize);this.queryInfo.pagesize = newSize;//重新指定每页数据量this.getUsersList();//带着新的分页请求获取数据},//监听 页码值 改变的事件handleCurrentChange(newPage){console.log(newPage);this.queryInfo.pagenum = newPage;//重新指定当前页this.getUsersList();//带着新的分页请求获取数据}},
};
</script><style scoped>
.text {font-size: 14px;
}.item {padding: 18px 0;
}
</style>

注:要在element.js注册“Pagination”组件,否则会不显示。
我们分别在方法区指定了两个监听方法,并重新带着分页数据发送了请求。我们看看效果:

至此,我们的分页效果全部实现。
下一篇我们继续实现用户状态动态修改的功能。


参考:黑马程序员(www.itheima.com)Vue项目实战教学视频

转载请注明出处:https://blog.csdn.net/u013517797/article/details/121874353


http://chatgpt.dhexx.cn/article/jaIrrUhT.shtml

相关文章

计算机oj平台搭建应该学什么,青岛大学开源OJ平台搭建

源码地址为:https://github.com/QingdaoU/OnlineJudge 可参考的文档为:https://github.com/QingdaoU/OnlineJudgeDeploy/tree/2.0 一、安装所依赖的环境 sudo apt-get update && sudo apt-get install -y vim python-pip curl git sudo apt-get install docker-compose…

JavaWeb 项目 --- 在线 OJ 平台 (三)

文章目录 1. 设计网页页面1.1 列表页1.2 详情页 2. 设计网页的前后端交互接口约定交互1: 获取题目的列表约定交互2: 获取指定题目的详情信息约定交互3: 向服务器提交编写的代码 3. 服务器的API3.1 导入 JackSon 库3.2 创建 ProblemServlet 类3.3 测试 ProblemServlet 类3.4 创建…

华为oj题目c语言,【华为OJ平台习题】

【华为OJ平台练习题】 /* 描述: 输入整型数组和排序标识&#xff0c;对其元素按照升序或降序进行排序 接口说明 原型&#xff1a; void sortIntegerArray(Integer[] pIntegerArray, int iSortFlag); 输入参数&#xff1a; Integer[] pIntegerArray&#xff1a;整型数组 int iSo…

HUSTOJ平台的搭建

HUSTOJ平台的搭建 首先&#xff0c;你要有一个服务器&#xff0c;本次记录的是阿里云Ubuntu18.04平台下的搭建 搭建LAMP环境(LAMP指的Linux&#xff08;操作系统&#xff09;、ApacheHTTP 服务器&#xff0c;MySQL&#xff08;有时也指MariaDB&#xff0c;数据库软件&#xff…

搭建学校oj平台-创建项目

创建项目 创建git 在gitee创建仓库 同步本地 云端本地成功 创建数据库&#xff08;学习mysql常用操作&#xff09; 连接用户名为root创建OJ数据库create database OJ;使用数据库OJuse OJ 创建后端项目 使用idea创建SpringBoot项目 选择Spring Initialize 创建项目 选择版…

OJ平台代码模板自动生成

文章目录 前言一、分析数据二、解析输入读取一个整数读取多行整数读取一行中的多个整数 三、解析输出打印一个整数打印一个整数数组 四、完整模板总结 前言 经常使用CSDN的小伙伴应该知道, 最近CSDN举办了好几期编程竞赛, 其中的编程模板, 都是有python脚本自动生成的, 这篇文…

OJ平台输入输出注意事项

文章目录 输入输出多组数据的处理输入不给你说有几组输入给你说输入几组不给你说有几组输入&#xff0c;但是会有一个特殊输入作为结束标志。 输出两组数据之间没有空行两组数据之间存在空行输出之间有空行 输入输出 多组数据的处理 由于ACM竞赛题目的输入数据和输出数据一般…

C++/Linux实战项目 - 负载均衡式在线OJ平台

目录 总览 简述 项目核心的三个模块 项目宏观结构 compile_server 编译与运行服务 总览分析 compiler.hpp runner.hpp compile_run.hpp compile_server.cc oj_server 基于MVC结构的oj服务设计 总览分析 Model 提供对数据的操作方法 View 使用后端数据对前端页面进…

OJ平台架构/用户权限验证/JAVA后端开发

转载自: 我的个人博客 OJ实验平台&#xff0c;采用沙箱后端运行代码&#xff0c;实现安全的实时评测&#xff08;OJ&#xff09;。此平台搭建的初衷为学校的数据结构实验提供课程代码的编写和测评&#xff0c;以此方便学生实验时得到实时的反馈&#xff0c;此后陆续被多个实验…

sql中检查时间是否重叠

先画一个时间轴&#xff0c;方便理解。 设新的时间块&#xff0c;开始时间为start&#xff0c;结束时间为end。数据库中的数据为item 这样可以直观的看出来&#xff0c;新的时间块插入进来&#xff0c;只需要判断 start<item.end and end > item.start 即可 当然上…

JS判断多个时间段是否有重叠(时分)

多个时间段比较 let dateAr [{ s: 01:00, e: 14:08 },{ s: 01:04, e: 02:05 },{ s: 05:21, e: 08:00 },{ s: 10:20, e: 12:08 }, ] function Fn() {for (let k in dateAr) {if (!judege(k)) {return false}}return true } function judege(idx) {for (let k in dateAr) {if (…

合并所有重叠的区间

Python-合并区间 题目 以数组 intervals 表示若干个区间的集合&#xff0c;其中单个区间为 intervals[i] [starti, endi] 请你合并所有重叠的区间&#xff0c;并返回 一个不重叠的区间数组&#xff0c;该数组需恰好覆盖输入中的所有区间 示例 1: 输入&#xff1a;interva…

关于sql语句中,统计时间重叠和时间不重叠

关于sql统计时间重叠和时间不重叠的问题 我们在开发过程中总会遇到这样的情况&#xff0c;一行数据中&#xff0c;有id、组、开始时间、结束时间。但是开始时间和结束时间肯定会出现时间重叠问题&#xff0c;比如说下面这种情况。 我们先找出时间重叠的公式&#xff1a; 可以发…

开始时间与结束时间重叠

let endNum ; //整个二维数组for(let itemName of showDate) {//for (let i 0; i < itemName.children.length; i) {if(itemName.screenId itemName.children[i].screenId) {// console.log(itemName.children[i])//把开始时间和结束时间转化成时间戳if(parseInt(itemNam…

在SQL Server中合并重叠日期

1.合并SQL中的时间重叠的记录方法:A --创建临时表&#xff0c;里面有重叠的日期declare t table (Name varchar(100), starttime datetime, endtime datetime); insert into t values(A , 2017-01-02 00:00 , 2017-03-28 00:10),(A , 2017-05-14 23:50 , 2017-05-29 23…

Java判断多个时间段是否重叠

因为项目需求用到比较给定时间段是否与已知时间段有重叠&#xff0c;所以写了一个比较简单易懂的方法&#xff0c;经测试可以满足本人目前的需求&#xff0c;大家如果发现该方法有什么问题可以提出来&#xff0c;如果有更好的方法也可以分享。 package com.demo;import java.u…

SQL中如何求解时间重叠的问题?

点击上方SQL数据库开发&#xff0c;关注获取SQL视频教程 SQL专栏 SQL数据库基础知识汇总 SQL数据库高级知识汇总 问题描述 时间重叠指上下两行数据的时间段有重叠部分&#xff0c;现在要找出这些在时间上有重叠的记录。 具体问题 有7个会议室&#xff0c;每个会议室每天都有人开…

多个日期时间段进行合并计算时长,剔除重叠时间段

多个日期时间段进行合并&#xff0c;算出经历的时长_itrytellyou的博客-CSDN博客_多个时间段合并多个日期时间段进行合并&#xff0c;算出经历的时长背景描述思路代码背景描述在公司进行人员描图模块开发时&#xff0c;涉及到了人员参会时长和参会次数的数据&#xff0c;比如一…

【js】判断时间段之间是否有重叠

一、需求 可以有多个时间段&#xff08;hh:mm&#xff09;&#xff0c;添加下一个时间段以及提交时需要判断各个时间段不能交叉&#xff0c;如下图&#xff1a; 一、方法 let dateAr [{ s: 02:00, e: 03:00 },{ s: 03:00, e: 04:01 },{ s: 05:00, e: 06:00 },{ s: 07:00, e:…

SQL中的时间重叠问题

点击关注上方“SQL数据库开发”&#xff0c; 设为“置顶或星标”&#xff0c;第一时间送达干货 SQL专栏 SQL基础知识第二版SQL高级知识第二版 问题描述 时间重叠指上下两行数据的时间段有重叠部分&#xff0c;现在要找出这些在时间上有重叠的记录。 具体问题 有7个会议室&#…