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)


相关推荐

  • url传递参数_url encode

    url传递参数_url encodeWerkzeug之URL路由原文链接http://werkzeug.pocoo.org/docs/0.12/routing/当需要组合控制器和视图函数时,我们需要一个调度器来实现。一个简单的实现方式是采用正则表达式匹测试路由信息,调用回调函数并返回结果。Werkzeug提供了一个类似Route[1]的强大功能.下文提到的所有对象都是从werkzeug.routing导入而不是

  • mbus总线是什么意思_Can总线如何配置500k波特率

    mbus总线是什么意思_Can总线如何配置500k波特率MBus总线上自动波特率识别1、通过前导字节0x68,捕获引脚通过1、0比特的两个上升沿的差值除以2来自动识别出波特率。2、为什么是通过两个上升沿,而不是一个上升沿一个下降沿,比如两个比特11的长度除以2来计算?因为两条平行的MBUS总线间存在电容效应,在实验室里面由于线比较短,不容易测试出来,但在实际产品使用中是真实存在的,因此在实验室里面分别用10nf、47nf、23n…

  • pychorm激活码【中文破解版】

    (pychorm激活码)好多小伙伴总是说激活码老是失效,太麻烦,关注/收藏全栈君太难教程,2021永久激活的方法等着你。IntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,下面是详细链接哦~https://javaforall.cn/100143.html0UY7RF7AC5-eyJsaWNlbnNlSWQi…

  • 贴片电阻符号表示_怎样识别贴片电阻的阻值

    贴片电阻符号表示_怎样识别贴片电阻的阻值1、贴片电阻阻值和精度贴片电阻本体颜色为黑色,电阻体上一般标注为白色数字(小型电阻无标识,称无印字贴片电阻),如图4所示。贴片电阻在电路板上的元件序列号(常称位号)为R(如R1、R2等)。贴片电阻的基本参数有标称阻值、额定功率、误差级别、最高电压、温度系数等,但在实际使用中,只需关注标称阻值和额定功率值这两项参数就可以了。主要有三位表示和四位表示两种方法三位表示:前2位数字分别为十位、个位值,称为有效数值,第3位数字是10的X次方,误差值在+-%5。…

  • jquery中的$()是什么_js简单特效

    jquery中的$()是什么_js简单特效在设计前端页面时,会用到很多效果,我们可以采用CSS样式或JavaScript来实现,在这里给大家介绍JS动画

    2022年10月16日
  • Python:变量的命名规则

    Python:变量的命名规则变量命名规则:1.变量命名不可以以数字开头,如4four,3man;2.不推荐使用以下划线开头,下划线开头的内容在python中有特殊意义,如_age,_name;3.推荐视同固定单词及其缩写,如skt=soket4.以posix命名规则为主,posix命名规则单词全部小写,且所有单词之间以下划线连接,如my_first_love;5.驼峰命名法:所有单词自动连接,且每个单词首字母均大写…

发表回复

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

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