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

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

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

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

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • Windows Phone 8.1 新功能 – 应用栏控件

    Windows Phone 8.1 新功能 – 应用栏控件

    2022年1月2日
    56
  • win10无法运行bat命令_windows2012执行bat

    win10无法运行bat命令_windows2012执行batwindow环境下,通过DOS命令模式,调用bat脚本,执行jar包。可以正常打印jar包中的日志都指定日志文件。通过tomcat部署的某服务去调用时出现不可调用,也不打印日志问题。分两步来确定问题:1、参数是否传递给bat脚本;2、bat脚本中的java-jar是否正常执行了;问题1通过,在bat脚本入口处增加echoname:%1age:%2&gt;&g…

    2022年9月23日
    0
  • python中sqrt函数用法_Python : sqrt() 函数

    python中sqrt函数用法_Python : sqrt() 函数开平方函数sqrt()返回x的平方根(x>0)语法:importmathmath.sqrt(x)注意:此函数不可直接访问,需要导入math模块,然后需要使用math静态对象调用此函数。参数x—数值表达式返回结果是浮点数。importmath#Thiswillimportmathmoduleprint”math.sqrt(100):”,math.s…

    2022年6月2日
    63
  • 怎么给iOS项目打包

    怎么给iOS项目打包

    2022年1月31日
    37
  • idea配置tomcat以及环境变量「建议收藏」

    idea配置tomcat以及环境变量「建议收藏」这里写目录标题tomcat环境变量idea配置tomcattomcat环境变量第一步下载tomcat网址:https://tomcat.apache.org/download-90.cgi下载完成后解压进入解压后的文件夹复制地址第二步下载tomcat环境变量配置右击此电脑->属性->高级系统设置->环境变量1.CATALINA_HOME2.编辑Path,点击“新建”,添加变量值:%CATALINA_HOME%\lib%CATALINA_HOME%\b

    2022年5月13日
    259
  • 大白话图解:什么是 CDN[通俗易懂]

    大白话图解:什么是 CDN[通俗易懂]  618电商节、双十一购物狂欢节,到底是什么在支撑数以万计的秒杀活动?这就不得不提一直隐姓埋名的CDN了,注意不是CSDN,而是CDN,CDN,CDN!  那到底CDN是什么鬼,这还要从西天取经说起……  1300年前,唐僧师徒取经要跋涉十万八千里,历经九九八十一难,一路打怪升级,最终才能修成正果,悟空加冕“斗战胜佛”。  1300年后,西游互联网已经开通,雷音寺…

    2025年6月9日
    0

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

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