vue输入查询内容但不查询，切页刷新表格会出现触发查询的不合理情况
一、问题说明
在vue切页时，有时会用到直接调用相关方法来刷新表格的情况，刷新表格时一般会带有几个查询条件的参数，传到后台实现条件查询，但是如果输入查询条件但是不查询(就是输入查询内容，不按查询按钮)，按切页时，如果不做处理就会出现切页时也会查询的不合理现象，如下为问题代码片段
查询框处
<el-input placeholder="按时间查询" v-model="queryMap.lendTime" class="input-with-select" clearable><el-select v-model="queryMap.lendTypeId" slot="prepend" placeholder="按类型查询" style="width: 120px"clearable id="typeId" @change="typeIdChoice"><el-option v-for="type in lendTypeList" :label="type.itemName" :value="type.itemId":key="type.itemId"></el-option></el-select><el-button slot="append" icon="el-icon-search" @click="search"></el-button></el-input>data中的查询对象
queryMap: {//查询相关id: '',lendTime: '',//借款时间lendTypeId: '',//借款类型idpage: 1,//第几页limit: 5,//每页几条},method中
查询表格信息的方法
getBorrowList() {//获取所有当前用户借款信息this.$http.post("getBorrowList", this.queryMap).then(res => {this.borrowList = res.data.borrowList.listthis.total = res.data.borrowList.totallet once = sessionStorage.getItem("onceB")if (once == 0) {//目的是在登录后，只显示一次审核未通过信息for (let i = 0; i < this.borrowList.length; i++) {if (this.borrowList[i].lendStateId == 7) {const h = this.$createElement;this.$notify({//弹出借款未通过信息title: '借款审核未通过',message: h('i', {style: 'color: black'}, '您有借款未通过审核,您可以修改后重新发送申请,请及时处理'),type: "warning",duration: 4500,//持续时长为4.5秒})sessionStorage.setItem("onceB", 1)break}}}}).catch(() => {this.$message.error("借款信息请求失败")})},查询按钮触发的查询方法
search() { //查找功能if (this.queryMap.lendTypeId == '' && this.queryMap.lendTime == '') {this.lengthSpan1 = 0//控制"显示所有"功能的显隐this.lengthSpan2 = 8}if (this.queryMap.lendTypeId != '' || this.queryMap.lendTime != '') {this.lengthSpan1 = 2this.lengthSpan2 = 6}this.queryMap.page = 1this.getBorrowList()//调用查询信息方法刷新表格},elementUI自带的分页方法
//页码改变时，参数val是改变后的页码handleCurrentChange(val) {this.queryMap.page = val;this.getBorrowList()//此处直接调用查询信息方法刷新表格},二、问题分析
其实造成上述不合理现象最主要的原因就是v-model双向绑定这个vue的指令，在输入框输入查询时间（我这里做的比较简化用的是时间的模糊查询，如果便于理解，大家可以想做按名字查询），输入的同时由于v-model这个指令，一输入，queryMap中的借款时间lendTime就有了值，所以在不按查询按钮，点击切页，直接调用getBorrowList（）方法，就会带着已有的lendTime去后台，后台实现的条件查询，从而造成没查询却查询了的不合理情况。
三、问题解决
我的想法是：只在点击查询按钮时，给queryMap中的属性赋值，实现如下
在data中添加对象queryMap1
queryMap: {//查询相关id: '',lendTime: '',//借款时间lendTypeId: '',//借款类型idpage: 1,//第几页limit: 5,//每页几条},queryMap1: {lendTime: '',lendTypeId: '',},查询输入框v-model绑定queryMap1中的数据
<el-input placeholder="按时间查询" v-model="queryMap1.lendTime" class="input-with-select" clearable><el-select v-model="queryMap1.lendTypeId" slot="prepend" placeholder="按类型查询" style="width: 120px"clearable id="typeId" @change="typeIdChoice"><el-option v-for="type in lendTypeList" :label="type.itemName" :value="type.itemId":key="type.itemId"></el-option></el-select><el-button slot="append" icon="el-icon-search" @click="search"></el-button></el-input>在点击查询按钮调用查询方法时，先把queryMap1中的数据赋给queryMap
search() { //查找功能this.queryMap.lendTypeId = this.queryMap1.lendTypeId//把queryMap1之后的查询条件赋给原queryMapthis.queryMap.lendTime = this.queryMap1.lendTimeif (this.queryMap.lendTypeId == '' && this.queryMap.lendTime == '') {this.lengthSpan1 = 0//控制"显示所有"功能的显隐this.lengthSpan2 = 8}if (this.queryMap.lendTypeId != '' || this.queryMap.lendTime != '') {this.lengthSpan1 = 2this.lengthSpan2 = 6}this.queryMap.page = 1this.getBorrowList()},其实我的想法很简单，就是只有在触发查询时才给查询对象queryMap赋值，什么时候查什么时候赋，不查询时，queryMap中的数据要不为空，要不为上一次查询的条件
四、其他解决方法
我开始时，想用$refs来获取输入框中的数据，从而实现改正，大体如下：
<el-col :span="5"><input placeholder="请输入员工姓名" clearable ref="names" id="fff"></input></el-col> //点击查询按钮search() {this.queryMap.pname = this.$refs.names.value//获取输入框中的数据if (this.queryMap.pname =='') {//控制"显示所有"功能的显隐this.lengthSpan1 = 0this.lengthSpan2 = 10}if (this.queryMap.pname !='') {this.lengthSpan1 = 2this.lengthSpan2 = 8}this.queryMap.page = 1;//将页码重置回第一页，主要作用是查找时如果当前页面是第二页，那么查找将会从第二页开始，造成查找缺失，所以要this.getStaffList() //先将页码归一，让其从第一页开始查询},但是这种方法有两个问题：
1、注意第一个代码段，用的标签是普通的<input>而不是<el-input>，原因是在添加ref="names"后<el-input>会出现输入名字直接清除输入的情况
2、在使用普通<input>标签后，也就放弃了elementUI自带的输入框样式，所以需要重新调整样式
因此这种方法也可以解决本文的错误，但是使用起来不是特别方便
以上就是我对该问题的叙述，请大家批评指正。谢谢大家。
vue输入查询内容但不查询，切页刷新表格会出现触发查询的不合理情况相关推荐
- 一键复制查询内容分享给他人链接url打开，他人对应的查询内容给分享者一致
前言 :需求:多个input框,根据input的结果查询表格内容,需要把这个input框的查询内容分享给别人,别人能够轻松打开这个链接,并且表格内容跟老大筛选的一致,总而言之:就是增加分享查询链接按钮 ...
- 表格号码归属地查询的正确检测方式
工具/原料: 能上网的电脑一台. 音速表格号码归属地 功能: 1 可以对表格中的归属地,运营商,进行快速的批量查询. 2 可以过滤表格当中重复的号码. 特点: 1. 查询以后的数据直观,明了. 2. ...
- 【Vue入门实践3】不调后端接口==＞el-table单纯前端实现查询和重置功能==＞【el-table组件使用】表格静态前端筛选、查询重置功能
一个人的心理健康程度与接纳痛苦的程度成正比.------感谢自己的不完美 目录 一.功能效果描述 二.el-table自带筛选功能 三.前端假查询重置功能 1. el-form表单 2.el-tabl ...
- 基于某网站的信息爬取与保存_指定查询内容
需求:对某网站实现输入指定的查询内容后动态爬取并能保存到文本文件中 解决方法:通过Python的BeautifulSoup.selenium的Kyes完成该需求. 代码见下: import json ...
- Redis的可视化工具查询内容为 --＞ “\xac\xed\x00\x05t\x00”乱码
Redis的可视化工具查询内容为 --> "\xac\xed\x00\x05t\x00"乱码 1.简要描述 2.问题描述 3.采用String序列化时遇到的问题 4.解决问题 ...
- 编写一个能管理城市区号信息的系统程序，系统能够读取、查找、输出城市区号信息。 c语言 ,,其中，区号查询内容显示效果为：
编写一个能管理城市区号信息的系统程序,系统能够读取.查找.输出城市区号信息. c语言 ,其中,区号查询内容显示效果为: 为你介绍[导语]长春成人高考频道从吉林省教育考试院了解到,2019年吉林长春成人高考成绩查询平台于11月20日正式开通.考生可登录吉林省教育考试 ...
- html限定输入的内容,HTML中限制input 输入框输入内容
限制 input 输入框只能输入纯数字 1.onkeyup = "value=value.replace(/[^\d]/g,'')" 使用 onkeyup 事件,有 bug ,那就 ...
最新文章
- Visual Studio中的TabControl控件的用法
- 每个开发人员都应该知道的 15 个 IntelliJ IDEA 快捷方式
- Spring Boot自定义缓存注解
- 接口测试用例设计思路
- socket 编程入门教程（三）TCP原理：5、TCP的三次握手（three-way handshake）
- 输入 ng build 或者 ng serve 之后没有任何输出的问题分析
- 分布式系统之消息队列
- Android 系统（138 ）---Mtk平台 Android 打包解包*.img ,修改system.img 参数
- python中msg函数_Python 知识点考点之闭包
- Nginx源码编译安装
- Ubuntu软件安装新选择—星火应用商店（QQ、微信等一网打尽）
- ext2.0中EditorGridPanel （8）
- android使用es文件管理器,Android系统文件管理教程-ES文件浏览器用法!
- CF1071C. Triple Flips
- Uptime-Kuma 一个轻量的开源监控工具
- LaTeX公式编辑器+mathtype6.9b
- excel2007 COUNTIFS
- 工业机器人视觉实训平台
- 如何使用RSA 对数据加解密和签名验签？一篇文章带你搞定
- PEWIN32 PRO site key