分页条件搜索

 1.添加分页控件(可在ElementPuls中查找)


        

2.设置分页控件用到的属性

data() {
    return {
        currentPage: 1,//当前页
        pageSize: 5,//每页显示的记录数
        total: 0,//总页数
        search: '',//搜索框内容
    }
},

3.定义分页控件用到的函数

handleSizeChange(pageSize){//修改每页显示的记录数时会被调用
    this.pageSize = pageSize;
    this.list();
},
handleCurrentChange(pageNum){//修改当前页时会被调用
    this.currentPage = pageNum;
    this.list();
}

4.list() 向服务器发送axios请求,获取数据

//编写一个list方法,请求返回所有的家居信息
            list() {
                /*request.get('api/furn/listFurn')//没有使用分页查询时的写法
                    .then(res => {
                        this.furnList = res.map.furnList;
                    })*/
                request.get('api/furn/furnsByCondition', {
                    params: {/*请求需要传递的参数*/
                        pageNum: this.currentPage,//当前页
                        pageSize: this.pageSize,//每页大小
                        search:this.search//搜索条件
                    }
                }).then(res => {/*成功后的回调函数*/
                    this.furnList = res.map.pageInfo.list;
                    this.total=res.map.pageInfo.total;
                })
            },

你可能感兴趣的:(前端#vue,前端#ElementPlus,vue.js,ElementPuls,axios)