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


相关推荐

  • vue文件上传功能_vue如何自定义组件

    vue文件上传功能_vue如何自定义组件vue的文件上传组件upload,拥有支持多种格式文件上传,单文件多文件等都支持,许多项目现在都少不了文件上传功能,但是vue的upload组件如果直接引用,肯定也有一些不方便之处,有的时候需要传参数,需要手动触发上传方法,而不是选择了文件就上传,所以结合我项目实例,写一vue自定义文件上传的实现,包括前端和后台的处理以及参数的接收。一、先认识一下vue的upload组件,官网链接ht…

    2022年8月15日
    6
  • ESP8266开发之旅 小程序之阿里云篇① “IOT菜鸟”小程序,小白简单配置就可以玩起来

    ESP8266开发之旅 小程序之阿里云篇① “IOT菜鸟”小程序,小白简单配置就可以玩起来ESP8266开发之旅小程序之阿里云篇①IOT菜鸟,小程序如何对接阿里云

    2022年7月16日
    19
  • Django(42)DRF安装与使用[通俗易懂]

    Django(42)DRF安装与使用[通俗易懂]DRF介绍DRF是DjangoRestFramework单词的简写,是在Django框架中实现RestfulAPI的一个插件,使用他可以非常方便的实现接口数据的返回。Django中也可以使用J

    2022年7月29日
    11
  • PHP面试题:HTTP中POST、GET、PUT、DELETE方式的区别

    PHP面试题:HTTP中POST、GET、PUT、DELETE方式的区别

    2021年10月12日
    50
  • 公有云和私有云的对比和转换

    公有云和私有云的对比和转换章节目录共5500字,可跳读趣味科普-虾蟹互换私有云同样有底蕴有深度私有云转公有云的真难点公有云转私有云的真难点私有云转公有云的假难题公有云转私有云的假难题两类云人力侧重的不同定制越多越好…

    2022年6月17日
    26
  • idea打包jar文件_idea如何打包jar外部包

    idea打包jar文件_idea如何打包jar外部包文章目录项目打包-贪吃蛇为例一.打包为jar1.打开结构2.添加结构3.选择4.设置参数5.添加依赖6.设置完成点击apply后,点击ok7.回到代码页面点击build8.选择建立9.目录会生成所需的包文件10.在文件夹里打开11.在cmd里运行jar即可运行12.在输入java-jarsnake.jar即可运行项目打包-贪吃蛇为例一.打包为jar1.打开结构2.添加结构3.选择因为有好多项目,所以这里需要建立空,如果只有一个目的项目,可以选择根据这个依赖,选择下面一项。4.

    2022年9月28日
    4

发表回复

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

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