VUE分页出现省略号

article/2025/10/22 13:07:43

VUE分页出现省略号


废话不多说直接上代码

 calcPageNum() {let pageTotal = Math.ceil(this.total / this.limit);  //获取最大页码数let cur = this.currentPage;//获取当前页码数if (pageTotal < 7) {//判断什么时候正常显示return Math.ceil(this.total / this.limit);} else {//出翔省略号if (cur < 4) {//判断当前的页码数是否小于4如果小于4 前四个正常显示,从第五个出现...return [1, 2, 3, 4, "...", pageTotal];} else if (cur > pageTotal - 4) {//判断是否在1后面出现...   return [1,"...",pageTotal - 4,pageTotal - 3,pageTotal - 2,pageTotal - 1,pageTotal,];} else {//两种情况都不存在就说明当前点击的中间的return [1, "...", cur - 1, cur, cur + 1, "...", pageTotal];}}},

正常显示:
在这里插入图片描述
第一种情况:
在这里插入图片描述
第二种情况:
在这里插入图片描述
上述情况都不存在:
在这里插入图片描述


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

相关文章

vue 分页表格数据导出

vue分页表格数据导出功能&#xff0c;超简单&#xff01;不用安装不用引入 写个方法即可实现 //导出exportExcel() {let url "/VueDemo/api/record/export.htm"; //这里写后台给的接口&#xff0c;注意反向代理也要写上&#xff01;VueDemo是我这边的反向代理url …

vue分页功能Bug

今天分页功能报错了&#xff0c;报错是这样报错的 看代码 <pagination v-show"adminTotal>0":total"adminTotal":page.sync"adminParams.pageNum":limit.sync"adminParams.pageSize"pagination"getAdminListPage" /&…

vue 分页

分页效果实现 思路&#xff1a; 1.每页显示的数量 2.当前页数 3,总页数 , 总页数放在computed中计算 放在页面 splice截取数组元素 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport&qu…

vue分页列表

html部分 css部分 js部分

Vue 怎样实现分页功能

文章目录 数据获取分页器实现页面渲染总结 Vue是一款流行的前端框架&#xff0c;它提供了丰富的API和组件&#xff0c;可以帮助开发者快速地构建现代化的Web应用程序。在Web应用程序中&#xff0c;分页功能是一个非常常见的需求&#xff0c;它可以帮助用户快速地浏览和查找大量…

使用vue实现分页

效果如上图&#xff0c;第一页显示5行数据 HTML代码如下 <footer class"col-sm-12 footerbox navbar-fixed-bottom"><div class"row"><div class"col-sm-12"><a class"btn btn-default" href"#" role…

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

接上篇《23、改造状态列的显示效果》 上一篇我们实现了状态列的显示效果以及插槽形式定义操作列的渲染&#xff0c;本篇我们来实现用户列表的分页效果。我们要在用户数据列表的左下方加入一个分页组件&#xff1a; Element-UI为我们提供了“Pagination分页”组件&#xff0c;我…

计算机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; 可以发…