界面:

主要代码:

搜索框:

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

最新文章

  1. 原生Ajax
  2. Log4net中的调错
  3. structs环境搭建
  4. Maven多层嵌套
  5. 包装 request Demo
  6. django 实现指定文件合并成压缩文件下载
  7. 逐步搭建Lamp环境之Linux的运行模式
  8. 百度地图隐藏缩放控件比例尺Logo
  9. Mysql七种 JOIN 连接
  10. 【XSY2612】Comb Avoiding Trees 生成函数 多项式求逆 矩阵快速幂
  11. Linux如何查看机器的配置信息
  12. [杂谈]杂谈章3 JAVA中如何用自动注入
  13. Google Chrome 下载&amp;绿化&amp;增强
  14. 50个常用sql语句 网上流行的学生选课表的例子
  15. UML和模式应用5:细化阶段(9)---迈向对象设计
  16. OC 创建单例
  17. Centos 安装 Oracle Java JDK
  18. hibernate 执行存储过程 方法
  19. Java关于NIO类的详解
  20. 数据库设计(六)第二范式(2NF)?

热门文章

  1. Font Awesome (Mark)
  2. linux 部署脚本
  3. 【JZOJ6389】小w学图论
  4. cookie的设置与销毁
  5. System.Web.Mvc.ActionResult.cs
  6. day17_内置函数_文件处理
  7. 第十五篇:java操作oracle踩坑之旅
  8. WPF 实现 TextBox 只能输入数字并且不能使用拷贝功能
  9. [转]NuGet学习笔记(1) 初识NuGet及快速安装使用
  10. token方法可用于临时关闭令牌验证,