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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • maven 本地仓库配置_Maven配置

    maven 本地仓库配置_Maven配置Maven本地仓库安装及配置1.进入maven官网下载2.配置环境变量3.测试是否配置成功windows+r打开dos命令出现这样的内容就是配置成功4.配置本地仓库右键记事本打开,或者编辑工具打开我这里用的是Notepad++打开的复制刚才创建的本地仓库路径切记把复制的路径、\改成/配置阿里镜像<mirror><id>alimaven</id> <name>aliyummave

    2022年9月15日
    2
  • Alex 的 Hadoop 菜鸟教程: 第15课 Impala 安装使用教程

    Alex 的 Hadoop 菜鸟教程: 第15课 Impala 安装使用教程本教程介绍Impala的安装,使用和JDBC调用。为什么用Impala?因为Hive太慢了!Impala也可以执行SQL,但是比Hive的速度快很多。为什么Impala可以比Hive快呢?因为Hive采用的是把你的sql转化成hadoop的MapReduce任务的代码,然后编译,打包成jar包,并分发到各个server上执行,这是一个相当慢的过程。而Impala根本就不用Hadoop的MapReduce机制,直接调用HDFS的API获取文件,在自己的内存中进行计算。

    2022年5月2日
    46
  • Java安全之Weblogic 2018-3248分析

    Java安全之Weblogic2018-3248分析0x00前言基于前面的分析,后面的还是主要看补丁的绕过方式,这里就来简单的记录一下。0x01补丁分析先来看看补丁细节private

    2021年12月12日
    55
  • VS2013 下载地址

    VS2013 下载地址VS2013下载链接http://download.microsoft.com/download/8/1/F/81FE1D40-2658-4CC5-8699-85D8377B35B9/vs2013.4_ult_chs.iso

    2025年10月24日
    3
  • Linux中GUI图形nmtui问题及网卡问题

    1.网络管理器未运行,如下图:解决:在systemd里面,可以直接使用systemctl进行管理启动:systemctlstartNetworkManger一般这一句是不行的,可能你设置了开机不允许启动NetworkManager,你可以试试以下命令:开机启动:chkconfigNetworkManageron启动网络管理器:serviceNetworkMan…

    2022年4月7日
    167
  • python编写简单网页_python制作动态数据图

    python编写简单网页_python制作动态数据图Django项目是一个定制的框架,可以和Python一起相结合制作网页。Django框架是用于创建模型的对象关系映射,也是为最终用户设计完美的管理界面。学习python语言的朋友可能尝试过用Django做一个网站,有的朋友可能会用bootstrap的CSS库来做,事实上做的还挺好看的。本文给大家介绍的是一个简单的网页制作,利用pythonDjango来做的,下面我们一起来看看吧。1、创建一个d…

    2022年10月13日
    4

发表回复

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

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