界面:

主要代码:

搜索框:

    <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. Jquery操作的是内存数据,H5 dataset操作的是dom属性

    Jquery操作的是内存数据,H5操作的是dom属性

  2. 微信公众号支付出现:“当前页面的URL未注册”

    微信公众号H5调起支付时,点击支付按钮出现“当前页面的URL未注册”的提示.解决办法:由于2017年8月1日微信官方把关于支付的信息转移到了商户平台:公众平台微信支付公众号支付授权目录.扫码支付回调U ...

  3. 关于TMDS

    https://en.wikipedia.org/wiki/Transition-minimized_differential_signaling TMDS,Transition Minimized ...

  4. Windbg 查看SSDT表

    SSDT HOOK 的原理其实非常简单,我们先实际看看KeServiceDescriptorTable是什么样的.         lkd> dd KeServiceDescriptorTabl ...

  5. #define SYSTEMSERVICE(_func) KeServiceDescriptorTable.ServiceTableBase[ *(PULONG)((PUCHAR)_func+1) 这

    这个跟KeServiceDescriptorTable的结构有关 下面是KeServiceDescriptorTable的结构定义 KeServiceDescriptorTabletypedef st ...

  6. Appium测试过程中,建议使用谷歌输入法。用搜狗输入法报错报找不到元素,卡住

    1. 手机使用谷歌输入法,在登录页面输入密码时输入数字时卡住报错 代码: 手机卡住 页面:看到页面上没有显示数字,所以卡住报错

  7. <day003>登录+爬取淘宝商品信息+字典用json存储

    任务1:利用cookie可以免去登录的烦恼(验证码) ''' 只需要有登录后的cookie,就可以绕过验证码 登录后的cookie可以通过Selenium用第三方(微博)进行登录,不需要进行淘宝的滑动 ...

  8. 连接 MySQL 报错:Lost connection to MySQL server at 'reading authorization packet', system error: 34

    报错信息: Lost connection to MySQL server at 解决方案: use mysql; ; flush privileges; 参考: https://blog.csdn. ...

  9. JS流程控制语句 来来回回(Do...while循环) 先执行后判断 do while结构的基本原理和while结构是基本相同的,但是它保证循环体至少被执行一次。

    来来回回(Do...while循环) do while结构的基本原理和while结构是基本相同的,但是它保证循环体至少被执行一次.因为它是先执行代码,后判断条件,如果条件为真,继续循环. do...w ...

  10. MySQL数据库CRUD命令用法

    数据库CRUD操作即添加(Create).读取(Read).更新(Update)和删除(Delete). 1. 添加操作也称插入操作,使用Insert语句,Insert语句可以用于几种情况: 插入完整 ...