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


相关推荐

  • 免费网络电话哪个最好_有什么网络电话是免费的

    免费网络电话哪个最好_有什么网络电话是免费的今天试用了,很容易,声音也很好。http://www.vipoo.cn/

    2022年8月1日
    13
  • pyqt退出窗口_win10电脑软件闪退

    pyqt退出窗口_win10电脑软件闪退1.使用qtdesigner创建窗口界面这个都很熟悉了,就不重复说明了。(自行百度)2.pyqt将.ui文件转成python代码cd到.ui文件的目录,使用指令即可完成。得到一个py文件(一个类)红色部分是我自己加上去的,只是为了更好看懂代码,调试代码。3.运行pyqt生成的python代码,生成界面这里,需要添加几行代码!直接在Ui_Dialog类的py文件尾部添加如下代码:if__name__==”__main__”:app=QApplication(

    2022年8月28日
    4
  • 使用use index优化sql查询「建议收藏」

    使用use index优化sql查询

    2022年2月17日
    35
  • selenium如何下载_python的selenium

    selenium如何下载_python的selenium在使用新的FirefoxProfile时,使用set_preference方法来配置配置文件,这样就可以单击Save和{},并且在下载过程中不会被中断。您可以按如下方式设置配置:profile=webdriver.FirefoxProfile()profile.set_preference(“browser.download.dir”,os.getcwd());profile.set_pref…

    2022年9月19日
    2
  • linux nohup命令输出日志_nohup运行sh文件

    linux nohup命令输出日志_nohup运行sh文件(一)前言因为经常使用Xshell进行服务器代码的运行,但是每次到关机后,或者是关掉Xshell连接窗口,在服务器上的命令,操作也就断掉了。这不得不找到了一个Linux命令:nohup(二)基本用法nohupcommand[arg…][&amp;]拿pythontest.py为例子一般我们运行命令是直接:pythontest.py,但是在xshel…

    2022年8月29日
    3
  • swagger2导出api为word文档(java实现)[通俗易懂]

    swagger2导出api为word文档(java实现)[通俗易懂]导出后的样式分析1,swagger2页面展示实际就是将返回的包含所有接口的json数据(在swagger界面,打开浏览器控制台即可看到该json数据)进行解析,并渲染到页面上。2,按照java面向对象思路分析,上述表格即为一个接口(一个单元),一共三个对象:Table.java、Request.java、Response.java。3,将原始swagger2的json数据进行…

    2025年5月28日
    4

发表回复

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

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