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


相关推荐

  • Camstar开发C#代码规范、Camstar更新以及Designer 开发规范

    Camstar开发C#代码规范、Camstar更新以及Designer 开发规范C#代码规范1.通用的两种代码规范:Camel(驼峰式)、Pascal(帕斯卡)驼峰式:第一个单词小写,后面单词首字母大写其余小写(例如:containerName)帕斯卡:所有单词首字母大写其余都小写(例如:Lotstart)2.当且仅当私有成员可以使用下划线开始(例如:privatestring_containerName)3.参数名、成员变量、局部变量都统一使用驼峰…

    2025年6月20日
    4
  • 方差分析法

    方差分析法前言工程实现的过程中需要对提取的特征指标进行有效性分析,评价各个特征指标与分类器不同类别的显著性关系,筛选出对不同类别判别贡献率最佳的指标,为设计分类器等提供支持。本文主要针对单因子方差分析法。实现步骤1.方差分析法的原理;2.数据准备;3.单因子方差分析法的matlab实现;4.特征的多重比较检验;实现过程1.方差分析法的原理;方差分析法(Analys…

    2022年10月16日
    3
  • 使用Vue写一个登录页面

    使用Vue写一个登录页面上一博客讲到构建了一个vue项目,现在在那个项目之上实现一个登录页面。1.构建项目的目录2.App.vue&lt;template&gt;&lt;divid="app"&gt;&lt;router-view/&gt;&lt;/div&gt;&lt;/template&gt;&lt;script&gt;exportdefault{

    2022年5月21日
    118
  • Ubuntu 20.04 虚拟显示器且远程连接

    Ubuntu 20.04 虚拟显示器且远程连接一、配置方法1)安装软件通过终端安装虚拟显示器软件。$sudoapt-getinstallxserver-xorg-core-hwe-18.04$sudoapt-getinstallxserver-xorg-video-dummy2)添加配置文件在/usr/share/X11/xorg.conf.d/中添加xorg.conf文件。$sudovim/usr/share/X11/xorg.conf.d/xorg.confSection”Device”

    2022年8月21日
    15
  • 使用树莓派gpio连接ps2手柄模块(附程序)「建议收藏」

    使用树莓派gpio连接ps2手柄模块(附程序)「建议收藏」最近,在学习使用树莓派的gpio,想直接通过树莓派直接控制ps2游戏手柄,但是在网上资料较少。直到发现了这个参考资料,我修改了一小部分代码,实现直接使用树莓派自带的gpio库函数来调用。#TheseareourbuttonconstantsimporttimeimportRPi.GPIOasgpioPSB_SELECT=1PSB_L3=2PSB_R3=3PSB_START=4PSB_PAD_UP=5PSB_PAD_RIGHT=6PSB_PAD

    2022年6月1日
    54
  • linux centos7配置网络教程,linux centos7配置网络「建议收藏」

    linux centos7配置网络教程,linux centos7配置网络「建议收藏」1.动态获取ip(前提是你的路由器已经开启了DHCP)修改网卡配置文件vi/etc/sysconfig/network-scripts/ifcfg-ens32(最后一个为网卡名称)动态获取IP地址需要修改两处地方即可(1)bootproto=dhcp(2)onboot=yes修改后重启一下网络服务即可systemctlrestartnetwork2、配置静态IP地址设置静态IP地…

    2022年5月8日
    47

发表回复

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

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