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


相关推荐

  • GB50174-2008电子信息系统机房设计规范_根据电子信息系统机房设计规范

    GB50174-2008电子信息系统机房设计规范_根据电子信息系统机房设计规范GB50174-2008《电子信息系统机房设计规范》 转载于:https://blog.51cto.com/56421/475664

    2022年9月27日
  • PS选区复制_ps怎么取消选区

    PS选区复制_ps怎么取消选区1.选区选中之后,利用移动工具,按住alt键,拖动即可复制所选区域。ps:再一个图层上操作。2.选区选中之后,Ctrl+c、Ctrl+v复制粘贴,按Ctrl+T移动。ps:新建一个图层操作,不

    2022年8月3日
  • 深度图转换成点云[通俗易懂]

    深度图转换成点云[通俗易懂]一、概述最近由于课题需要数据源,但是没有直接获取的方法,所以只能在周老师http://www.qianyi.info/的网站上自己下载深度图转换成点云数据,大概花了三点的时间,终于弄得差不多了,这里做个记录。二、数据准备和环境配置1、数据下载在http://redwood-data.org/indoor/dataset.html上下载CleanDepthSequence和Groun…

    2022年5月30日
  • original_keras_version = f.attrs[‘keras_version‘].decode(‘utf8‘)

    original_keras_version = f.attrs[‘keras_version‘].decode(‘utf8‘)File”/home/liqiang/anaconda3/envs/tensorflow1.8/lib/python3.6/site-packages/keras/engine/saving.py”,line1004,inload_weights_from_hdf5_grouporiginal_keras_version=f.attrs[‘keras_version’].decode(‘utf8’)AttributeError:’str’objecthasnoatt…

    2022年10月18日
  • 树莓派3B+ 安装系统

    树莓派3B+ 安装系统树莓派3B+安装系统对于树莓派3B+系统安装方法有很多,我就介绍比较普通的一种。适合小白操作!安装概要步骤:官网下载系统-》刷入TF卡-》设置开启显示器和SSH-》通电-》进入系统详细步骤进入官方网站下载系统镜像。https://www.raspberrypi.org/downloads/来到下面这个页面如果感觉下载速度慢,可以将下载链接放到迅雷里面下,基本可以做到满速下载!下载

    2022年6月25日
  • IMDG

    IMDG将内存作为首要存储介质不是什么新鲜事儿,在对主存的使用上,内存数据网格(InMemoryDataGrid,IMDG)与IMDB类似,但二者在架构上完全不同。IMDG特性可以总结为以下几点:数据

    2022年8月2日

发表回复

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

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