问题

2023年02月18日

柏拉文

越努力，越幸运

问题一、分页没有及时更新数据

---

问题描述: 如果当前是第二页，点击搜索，强制设置 current-page 为1，但是当前页还是第二页。也就是说el-pagination 分页有一个Bug，搜索过后页面数据变化了，但是原本的分页当前页还是没有改变

解决方案: 通过 key 使 el-pagination重新渲染

Template

<template>
    <el-pagination
        :key="visiblePagination"
        :current-page="currentPage"
        :page-sizes="[100, 200, 300, 400]"
        :page-size="limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        >
    </el-pagination>
</template>

Script

export default{
    data(){
        return{
            total:null,
            currentPage:1,
            currentPageSize:20,
            visiblePagination:true
        }
    },
    methods:{
        queryData(){
            this.visiblePagination = false;
            queryList().then(res=>{
                const {data}=res;
                this.visiblePagination = true;
                if(data.length<this.currentPageSize){
                    this.total=this.currentPage*this.currentPageSize;
                }else{
                    this.total=null
                }
            });
        }
    }
}

Style

.pagination{
}

问题二、数据总条数问题

---

问题描述: el-pagination 标准写法是要依赖于后端返回的 total 字段的，但是有时候后端不会返回 total 字段的，那么这时候我们可以使用以下方案来解决。

解决方案:

• 如果返回的数据数量小于当前页数大小时: total=当前页数*当前页数大小;
• 如果返回的数据数量大于等于当前页数大小时: total=（当前页+1）* 当前页数大小

Template

<template>
    <el-pagination
        :key="visiblePagination"
        :current-page="currentPage"
        :page-sizes="[100, 200, 300, 400]"
        :page-size="limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        >
    </el-pagination>
</template>

Script

export default{
    data(){
        return{
            total:0,
            currentPage:1,
            currentPageSize:20,
            visiblePagination:true
        }
    },
    methods:{
        queryData(){
            this.visiblePagination = false;
            queryList().then(res=>{
                const {data}=res;
                this.visiblePagination = true;
                if(data.length<this.currentPageSize){
                    this.total=this.currentPage*this.currentPageSize;
                }else{
                    this.total=(this.currentPage+1) * this.currentPageSize;
                }
            });
        }
    }
}

Style

.pagination{
}