VUE_vue分页添加省略号

末蓝、 2022-11-05 05:29 197阅读 0赞

data: { 
    
    },
    computed:{ 
    	//使用计算属性返回
        pages(){ 
            let start = 16;  //当前页
            let end = 27;   //最后一页
            if(end < 10) return end;	//省略号的添加是分页大于10的时候
            if(start <=5){   //当前页码小于等于5
                return [1,2,3,4,5,6,'...',end]		//[1,2,3,4,5,6,'...',最后一页]
            }else if(start > end-5){       //当前页码大于等于最后一页-5
                return [1,'...',end-5,end-4,end-3,end-2,end-1,end]  //[1,'...',尾页-5,尾页-4,尾页-3,尾页-2,尾页-1,尾页]
            }else{  //当前页码大于5并且当前页码小于最后一页页码-5
                return [1,'...',start-3,start-2,start-1,start,start+1,start+2,start+3,'...',end]		//[1,'...',当前页-3,当前页-2,当前页-1,当前页,当前页+1,当前页+2,当前页+3,'...',尾页]
            }
        }
    }

![在这里插入图片描述][20210304132353783.png]  
![在这里插入图片描述][20210304132414266.png]  
![在这里插入图片描述][20210304132331571.png]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU5OTkzMQ_size_16_color_FFFFFF_t_70]

[20210304132353783.png]: /images/20221023/e5c6f9c4dd4e43cf95663488d24d14d3.png
[20210304132414266.png]: /images/20221023/bf76e22dfcd34f8895f1a840a8b41a04.png
[20210304132331571.png]: /images/20221023/1cf090123fa545058ebd957160cadeed.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU5OTkzMQ_size_16_color_FFFFFF_t_70]: /images/20221023/39dafbef2f4e437e920bdd25f718b8ae.png