VUE分页出现省略号「建议收藏」

VUE分页出现省略号「建议收藏」提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档VUE分页出现省略号废话不多说直接上代码calcPageNum(){letpageTotal=Math.ceil(this.total/this.limit);//获取最大页码数letcur=this.currentPage;//获取当前页码数if(pageTotal<7){//判断什么时候正常显示

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE稳定放心使用

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];
        }
      }
    },

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

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/187111.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • 回归模型中的u_什么是面板回归模型

    回归模型中的u_什么是面板回归模型文章目录最简单的RNN回归模型入门(PyTorch版)RNN入门介绍PyTorch中的RNN代码实现与结果分析版权声明:本文为博主原创文章,转载请注明原文出处!写作时间:2019-03-0212:46:15本文部分图片素材来自互联网,如有侵权,请联系作者删除!最简单的RNN回归模型入门(PyTorch版)RNN入门介绍至于RNN的能做什么,擅长什么,这里不赘述。如果不清楚,请先维基一…

    2022年10月20日
  • Windows 10 多出多个虚拟显示器的解决方法「建议收藏」

    Windows 10 多出多个虚拟显示器的解决方法「建议收藏」昨天更新Windows101809之后,系统中多出了4个“通用非即插即用监视器”,由于本人长期是笔记本外接显示器使用,出现这个问题后,鼠标会经常性的跑到另外的屏幕上去,甚至一些窗口会跑到其他页面上去。到NVIDIA控制面板查看之后发现多出的显示器是在核心显卡上,所以怀疑是核显的问题。其实之前也出现过类似问题,Google之后发现有人也有类似问题。尝试在任务管理器中卸载多出…

  • 数据挖掘 韩家炜_数据挖掘的特点

    数据挖掘 韩家炜_数据挖掘的特点第三版25页  数据挖掘又称知识发现(KDD:KnowledgeDiscoveryinDatabase),即“从数据中挖掘知识”。  丰富的数据以及对强有力的数据分析工具的需求,这种情况被描述为“数据丰富,但信息匮乏”。数据挖掘可以看作信息技术自然进化的结果。数据库和数据管理产业在一些关键功能的开发上不断发展:数据收集和数据库创建数据管理(包括数据存储和检索、数据库事务处理)高级数

    2022年10月29日
  • SQL模糊查询语句(like)

    SQL模糊查询语句(like) 确定给定的字符串是否与指定的模式匹配。模式可以包含常规字符和通配符字符。模式匹配过程中,常规字符必须与字符串中指定的字符完全匹配。然而,可使用字符串的任意片段匹配通配符。与使用=和!=字符串比较运算符相比,使用通配符可使LIKE运算符更加灵活。如果任何参数都不属于字符串数据类型,MicrosoftSQLServer会将其转换成字符串数据类型(如果可能)。语法mat

  • 后端性能优化的指标有哪些_后端性能优化

    后端性能优化的指标有哪些_后端性能优化网站的性能测试性能测试是性能优化的前提,也是性能优化结果的检查和度量标准。性能测试的常用指标:响应时间并发数目吞吐量。常用的吞吐量指标:  ①TPS(每秒事务数)、②HPS(每秒Http请求数)、③QPS(每秒查询数,)性能计数器。常用的性能计数器有:SystemLoad、对象和线程数、CPU使用、内存使用、磁盘和网络IO等指标。性能测试的几个参考点:性能测试负载测试:系…

  • QListWidget 布局方向设定

    QListWidget 布局方向设定//我们看下官方文档的说明//创建一个QListWidgetQListWidget m_list //假如m_list添加了很多子项(一个子项由一个图片和一段文字组成) //如果设置为m_second_list->setViewMode(QListView::IconMode); //那么m_list子项就会从左到右横向的排列

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号