分页条件搜索

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

<!--添加分页控件-->
        <div class="demo-pagination-block">
            <el-pagination
                    v-model:current-page="currentPage"
                    v-model:page-size="pageSize"
                    :page-sizes="[5, 10, 15, 20]"
                    :small="small"
                    :disabled="disabled"
                    :background="background"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
            />
        </div>

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;
                })
            },