vue实现分页器

分页器的实现

静态页面

<div class="paging">
    <button>上一页</button>
    <button>1</button>

    <button>...</button>

    <button>2</button>
    <button>3</button>
    <button>4</button>
    <button>5</button>
    <button>6</button>

    <button>...</button>
    <button>10</button>
    <button>下一页</button>
    <span>总10页</span>
</div>

.paging {
    
    
    height: 25px;
    display: flex;
    justify-content: center;


    button {
    
    
        width: 30px;
        height: 25px;
        margin-left: 10px;
        text-align: center;

        &:nth-child(1) {
    
    
            width: 100px;
            height: 25px;
        }

        &:nth-last-child(2) {
    
    
            width: 100px;
            height: 25px;
        }
    }

    span {
    
    
        margin-left: 30px;
    }

    .active {
    
    
        background-color: brown;
    }
}

传递数据

父组件给子组件（分页器传递参数）

<Pagination
  :pageNo="searchParams.pageNo"
  :pageSize="searchParams.pageSize"
  :total="total"
  :continues="5">
</Pagination>

• pageNo : 当前页数
• pageSize：当前页数显示多少条数据
• total：数据的总数
• continues：连续的页码数

功能实现

计算总共页数

computed:{
    
    
	totalPage(){
    
    
	return Math.ceil(this.total /this.pageSize)
	}
}

计算处连续页码的起始于结束数字（连续页码的数字：至少是5）

computed:{
    
    
	startNumAndEndNum(){
    
    
		const {
    
    continues,pageNo,totalPage} = this
		//定义俩个变量存储起始数字与结束数字
		let start = 0 ,end = 0;
		//连续页码数字5[就是至少5页]，如果出现不正常的现象【不够五页】
		//不正常【总页数没有连续页码数】
		if(continues>totalPage){
    
    
			start = 1;
			end = totalPage
		}else{
    
    
			//正常现象【连续页码5，但是总页码一定大于5的】
			start = pageNo - parseInt(continues / 2);
			end= pageNo + parseInt(continues / 2);
			if(start < 1){
    
    
				start = 1
				end = 5
			}
			if(end > totalPage){
    
    
				start = totalPage - continues  + 1;
				end = totalPage;
			}
		}
		return {
    
    start,end}
	}
}

页码的显示

<div class="paging">
    <button :disabled="pageNo==1">上一页</button>
    <button v-if="startNumAndEndNum.start>1" >1</button>

    <button v-if="startNumAndEndNum.start>2">...</button>
	//中间部分
    <button v-for="(page,index) in startNumAndEndNum.end" :key="index" v-show="page >= startNumAndEndNum.start" >{
   
   {page}}</button>
   

    <button v-if="startNumAndEndNum.end < totalPage-1">...</button>
    <button v-if="startNumAndEndNum.end < totalPage">{
   
   {totalPage}}</button>
    <button :disabled="pageNo == totalPage">下一页</button>
    <span>总{
   
   {totalPage}}页</span>
</div>

案例演示

当continues > totalPage

假设 continues = 5, totalPage = 4, pageNo = 1
当前的页码数
1 … 1 2 3 4 … 4
(1)startNumAndEndNum.start>1
… 1 2 3 4 … 4
(2)v-if="startNumAndEndNum.start>2
1 2 3 4 … 4
(3)page>=startNumAndEndNum.start
1 2 3 4 … 4
(4)startNumAndEndNum.end < totalPage-1
1 2 3 4 4
(5)v-if="startNumAndEndNum.end < totalPage
1 2 3 4
最终呈现页 1 2 3 4

continues < totalPage

当 start <= 0

if(start < 1){
    
    
	start = 1
	end = 5
}

当start ,end 符合条件

start = pageNo - parseInt(continues / 2);
end= pageNo + parseInt(continues / 2);

当end > totalPage

start = totalPage - continues  + 1;
end = totalPage;