Vue开发实例（19）之用户列表分页的实现

Vue开发实例（19）之用户列表分页的实现Vue是现在前端最流行的框架之一，作为前端开发人员应该要熟练的掌握它，如果你是打算学习Vue的开发流程，那么来吧，明哥带你快速上手、带你飞！即使你并非前端开发人员，对前端的开发流程进行一定的了解也是很有必要的，谁也不确定公司以后会不会让我做前端去，做些简单的实例既不需要花费很多时间，也可以提高自己的自信和成就感，所以跟着明哥走，没有错，来吧！导航✪&nbs

编程界明世隐

3240人浏览 · 2022-05-28 01:00:00

编程界明世隐 · 2022-05-28 01:00:00 发布

引言

Vue是现在前端最流行的框架之一，作为前端开发人员应该要熟练的掌握它，如果你是打算学习Vue的开发流程，那么来吧，明哥带你快速上手、带你飞！
即使你并非前端开发人员，对前端的开发流程进行一定的了解也是很有必要的，谁也不确定公司以后会不会让我做前端去，做些简单的实例既不需要花费很多时间，也可以提高自己的自信和成就感，所以跟着明哥走，没有错，来吧！

分页查询的实现

在table的下方添加 pagination 分页代码

<el-pagination
                background
                layout="prev, pager, next"
                :page-size.sync="pager.pageSize"
                :current-page="pager.index"
                :page-count="pager.totalPage"
                @current-change="handleCurrentChange"
        >
        </el-pagination>

在data中增加pager对象，用来分页

pageSize 每页记录数，这里为了方便测试，我设置为1
totalPage 总页数
index 当前页

pager:{
   pageSize:1,
   totalPage:1,
   index:1
}

修改列表查询代码

添加了totalPage的重新设置代码
将pageSize和index传入后台，计算用以返回需要的数据

getUserData(){
    this.$axios.post('/post/userList',{pageSize:this.pager.pageSize,index:this.pager.index}).then(res=>{
        this.userData = res.data.userData;
        this.pager.totalPage = res.data.pager.totalPage;
    });
}

handleCurrentChange方法，当点击上一页、下一页、点击对应页的时候会触发。

handleCurrentChange(val){
	//把当前页的值设置给index
    this.pager.index = val;
    //执行查询，更新数据
    this.getUserData();
}

mockjs代码修改如下

当然，这里说到底还是模拟后端返回的数据

Mock.mock('/post/userList','post',function(param){
    let body = JSON.parse(param.body);
    let pageSize = body.pageSize;
    let index = body.index;
    let pager={};
    //计算总页数
    pager.totalPage  = Math.ceil(userData.length/ pageSize);
    console.log(pager.totalPage)

    let newData=[]

    //从userData取出符合条件的数据
    let start=0,end=0;
    start = (index-1) * pageSize;
    end = index * pageSize-1;
	//根据计算的开始、结束下标，从数组中获取数据
    userData.forEach((item,index)=>{
        if(index>=start&&index<=end){
            newData.push(item)
        }
    })

    return{
        userData:newData,
        pager:pager
    }
});