记录:vue结合springboot进行分页查询和按条件进行查询
界面:
主要代码:
搜索框:
<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();
},
记录:vue结合springboot进行分页查询和按条件进行查询的更多相关文章
- MySQL之多表查询一 介绍 二 多表连接查询 三 符合条件连接查询 四 子查询 五 综合练习
MySQL之多表查询 阅读目录 一 介绍 二 多表连接查询 三 符合条件连接查询 四 子查询 五 综合练习 一 介绍 本节主题 多表连接查询 复合条件连接查询 子查询 首先说一下,我们写项目一般都会建 ...
- hibernate封装查询,筛选条件然后查询
// 封装查询条件 @Test public void transmitParameter() { Map map = new HashMap<String, String>(); // ...
- sql条件为空查询全部,不为空按条件查询以及多条件筛选查询。
procedure queryLackLonOrLatTdCell(i_region_name varchar2, i_state varchar2) is begin select region_n ...
- sql语句-如何在SQL以一个表中的数据为条件据查询另一个表中的数据
select *from 表2where 姓名 in (select 姓名from 表1where 条件) 这个就是用一个表的查询结果当作条件去查询另一个表的数据
- SpringBoot JPA + 分页 + 单元测试SpringBoot JPA条件查询
application.properties 新增数据库链接必须的参数 spring.jpa.properties.hibernate.hbm2ddl.auto=update 表示会自动更新表结构,所 ...
- SpringData JPA进阶查询—JPQL/原生SQL查询、分页处理、部分字段映射查询
上一篇介绍了入门基础篇SpringDataJPA访问数据库.本篇介绍SpringDataJPA进一步的定制化查询,使用JPQL或者SQL进行查询.部分字段映射.分页等.本文尽量以简单的建模与代码进行展 ...
- Hibernate的条件查询的几种方式+查询所有的记录
条件查询 . 第一种,用?占位符,如: //登录(用?占位符) public List<UserPO> LoginUser(UserPO up)throws Exception{ Sess ...
- 工作中遇到的oracle分页查询问题及多表查询相关
在工作中,有时,我们会用到oracle分页查询.这时,就需要先了解oracle的rownum.rowmun是oracle的伪列,只能用符号(<.<=.!=),而不能用这些符号(>,& ...
- Oracle子查询相关内容(包含TOP-N查询和分页查询)
本节介绍Oracle子查询的相关内容: 实例用到的数据为oracle中scott用户下的emp员工表,dept部门表,数据如下: 一.子查询 1.概念:嵌入在一个查询中的另一个查询语句,也就是说一个查 ...
随机推荐
- vue(1) 第一个例子
代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...
- AM8互联设置方法
Am8互联设置 这个只需要部署在一个总部的AM8的 Oiorg所在机器上就可以 环境: Windows 2012 or windows 2008,IIS ,.Net4 AM8 数据库必须升级到:201 ...
- [JZOJ3402] 【GDOI2014模拟】Pty的字符串
题目 给你一棵每条边从父亲指向儿子的树,每条边上面有一个字母. 从树上的任意一点出发,走出的路径就是对应一个子串. (这不是\(Trie\),因为每个父亲可能会连出字母相同的边) 再给你一个字符串\( ...
- 携程的 Dubbo 之路
本篇文章整理自董艺荃在 Dubbo 社区开发者日上海站的演讲. 缘起 携程当初为什么要引入 Dubbo 呢?实际上从 2013 年底起,携程内主要使用的就是基于 HTTP 协议的 SOA 微服务框架. ...
- 分析post与json
寻找登录的post地址 在form表单中寻找action对应的url地址 post的数据是input标签中name的值作为键,真正的用户名密码作为值的字典,post的url地址就是action对应的u ...
- DXP 笔记
1. 从原理图上添加 net class,快捷键 : P -> V -> C
- js文件操作之——导出Excel (js-xlsx)
前阵子跟server同学讨论一个Excel导出的需求,我说JS搞不定,需要server来做,被server同学强行打脸. 今天研究了下,尼玛,不光可以,还很强大了! 总结:经验是害人的,尤其是在发展迅 ...
- Invalid argument value:无效参数值。原因是:把Session值user0当做username作为参数了。 而实际上此时username是user0的成员变量。参数应该是user0.getUsername();然后发现别人的List得加泛型,我的怎么不用加,运行报错,上网收了错误原因,因为导包错误,不小心导错包了,改为util.List包对了。
- JavaScript开发人员必知的10个关键习惯
还在一味没有目的的编写JavaScript代码吗?那么你就OUT了!让我们一起来看看小编为大家搜罗的JavaScript开发人员应该具备的十大关键习惯吧! 随着新技术的不断发展,JavaScript已 ...
- POJ - 2778 ~ HDU - 2243 AC自动机+矩阵快速幂
这两题属于AC自动机的第二种套路通过矩阵快速幂求方案数. 题意:给m个病毒字符串,问长度为n的DNA片段有多少种没有包含病毒串的. 根据AC自动机的tire图,我们可以获得一个可达矩阵. 关于这题的t ...