界面:

主要代码:

搜索框:

    <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进行分页查询和按条件进行查询的更多相关文章

  1. MySQL之多表查询一 介绍 二 多表连接查询 三 符合条件连接查询 四 子查询 五 综合练习

    MySQL之多表查询 阅读目录 一 介绍 二 多表连接查询 三 符合条件连接查询 四 子查询 五 综合练习 一 介绍 本节主题 多表连接查询 复合条件连接查询 子查询 首先说一下,我们写项目一般都会建 ...

  2. hibernate封装查询,筛选条件然后查询

    // 封装查询条件 @Test public void transmitParameter() { Map map = new HashMap<String, String>(); // ...

  3. sql条件为空查询全部,不为空按条件查询以及多条件筛选查询。

    procedure queryLackLonOrLatTdCell(i_region_name varchar2, i_state varchar2) is begin select region_n ...

  4. sql语句-如何在SQL以一个表中的数据为条件据查询另一个表中的数据

    select *from 表2where 姓名 in (select 姓名from 表1where 条件) 这个就是用一个表的查询结果当作条件去查询另一个表的数据

  5. SpringBoot JPA + 分页 + 单元测试SpringBoot JPA条件查询

    application.properties 新增数据库链接必须的参数 spring.jpa.properties.hibernate.hbm2ddl.auto=update 表示会自动更新表结构,所 ...

  6. SpringData JPA进阶查询—JPQL/原生SQL查询、分页处理、部分字段映射查询

    上一篇介绍了入门基础篇SpringDataJPA访问数据库.本篇介绍SpringDataJPA进一步的定制化查询,使用JPQL或者SQL进行查询.部分字段映射.分页等.本文尽量以简单的建模与代码进行展 ...

  7. Hibernate的条件查询的几种方式+查询所有的记录

    条件查询 . 第一种,用?占位符,如: //登录(用?占位符) public List<UserPO> LoginUser(UserPO up)throws Exception{ Sess ...

  8. 工作中遇到的oracle分页查询问题及多表查询相关

    在工作中,有时,我们会用到oracle分页查询.这时,就需要先了解oracle的rownum.rowmun是oracle的伪列,只能用符号(<.<=.!=),而不能用这些符号(>,& ...

  9. Oracle子查询相关内容(包含TOP-N查询和分页查询)

    本节介绍Oracle子查询的相关内容: 实例用到的数据为oracle中scott用户下的emp员工表,dept部门表,数据如下: 一.子查询 1.概念:嵌入在一个查询中的另一个查询语句,也就是说一个查 ...

随机推荐

  1. vue(1) 第一个例子

    代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...

  2. AM8互联设置方法

    Am8互联设置 这个只需要部署在一个总部的AM8的 Oiorg所在机器上就可以 环境: Windows 2012 or windows 2008,IIS ,.Net4 AM8 数据库必须升级到:201 ...

  3. [JZOJ3402] 【GDOI2014模拟】Pty的字符串

    题目 给你一棵每条边从父亲指向儿子的树,每条边上面有一个字母. 从树上的任意一点出发,走出的路径就是对应一个子串. (这不是\(Trie\),因为每个父亲可能会连出字母相同的边) 再给你一个字符串\( ...

  4. 携程的 Dubbo 之路

    本篇文章整理自董艺荃在 Dubbo 社区开发者日上海站的演讲. 缘起 携程当初为什么要引入 Dubbo 呢?实际上从 2013 年底起,携程内主要使用的就是基于 HTTP 协议的 SOA 微服务框架. ...

  5. 分析post与json

    寻找登录的post地址 在form表单中寻找action对应的url地址 post的数据是input标签中name的值作为键,真正的用户名密码作为值的字典,post的url地址就是action对应的u ...

  6. DXP 笔记

    1. 从原理图上添加 net class,快捷键 : P -> V -> C

  7. js文件操作之——导出Excel (js-xlsx)

    前阵子跟server同学讨论一个Excel导出的需求,我说JS搞不定,需要server来做,被server同学强行打脸. 今天研究了下,尼玛,不光可以,还很强大了! 总结:经验是害人的,尤其是在发展迅 ...

  8. Invalid argument value:无效参数值。原因是:把Session值user0当做username作为参数了。 而实际上此时username是user0的成员变量。参数应该是user0.getUsername();然后发现别人的List得加泛型,我的怎么不用加,运行报错,上网收了错误原因,因为导包错误,不小心导错包了,改为util.List包对了。

  9. JavaScript开发人员必知的10个关键习惯

    还在一味没有目的的编写JavaScript代码吗?那么你就OUT了!让我们一起来看看小编为大家搜罗的JavaScript开发人员应该具备的十大关键习惯吧! 随着新技术的不断发展,JavaScript已 ...

  10. POJ - 2778 ~ HDU - 2243 AC自动机+矩阵快速幂

    这两题属于AC自动机的第二种套路通过矩阵快速幂求方案数. 题意:给m个病毒字符串,问长度为n的DNA片段有多少种没有包含病毒串的. 根据AC自动机的tire图,我们可以获得一个可达矩阵. 关于这题的t ...