记录:vue结合springboot进行分页查询和按条件进行查询
2024-08-30 02:14:48
界面:
主要代码:
搜索框:
<el-form
ref="searchForm"
:inline="true"
:model="searchMap"
style="margin-top: 20px;margin-left: 0px"
>
<el-form-item prop="companyName">
<el-input v-model.lazy="searchMap.companyName">
<template slot="prepend">公司名称</template>
</el-input>
</el-form-item>
<el-button @click="searchcompany" icon="el-icon-search"></el-button>
</el-form>
<el-button @click="searchcompany" icon="el-icon-search"></el-button>
绑定按钮的事件为:searchcompany(根据公司名称进行查询)
searchcompany() {
this.currentPage = 1; // 赋值1是为了查询时,由页面1开始查询,避免查询不到数据的情况,以后想到更好的办法再优化
this.searchBycompanyName();
},
// 根据公司名称查询
searchBycompanyName() {
resourcemgApi
.zyCompanySearchByName(this.searchMap.companyName, this.currentPage, this.pageSize)
.then(resp => {
this.list = resp.data.rows;
this.total = resp.data.total;
console.log(resp);
});
},
分页按钮部分:
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[5,10,20,30]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
></el-pagination>
分别绑定两个事件:
handleSizeChange:改变每页的数据条数
handleCurrentChange:改变当前页码
// 当每页显示条数改变后,被触发,val是最新的显示条数
handleSizeChange(val) {
console.log(`每页 ${val} 条`);
this.pageSize = val;
this.searchBycompanyName();
},
// 当页码改变后,被触发,val是最新的页码
handleCurrentChange(val) {
console.log(`当前页: ${val}`);
this.currentPage = val;
this.searchBycompanyName();
},
最新文章
- 原生Ajax
- Log4net中的调错
- structs环境搭建
- Maven多层嵌套
- 包装 request Demo
- django 实现指定文件合并成压缩文件下载
- 逐步搭建Lamp环境之Linux的运行模式
- 百度地图隐藏缩放控件比例尺Logo
- Mysql七种 JOIN 连接
- 【XSY2612】Comb Avoiding Trees 生成函数 多项式求逆 矩阵快速幂
- Linux如何查看机器的配置信息
- [杂谈]杂谈章3 JAVA中如何用自动注入
- Google Chrome 下载&;绿化&;增强
- 50个常用sql语句 网上流行的学生选课表的例子
- UML和模式应用5:细化阶段(9)---迈向对象设计
- OC 创建单例
- Centos 安装 Oracle Java JDK
- hibernate 执行存储过程 方法
- Java关于NIO类的详解
- 数据库设计(六)第二范式(2NF)?