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: '',//借款类型id
                    page: 1,//第几页
                    limit: 5,//每页几条
                },

method中

查询表格信息的方法

getBorrowList() {//获取所有当前用户借款信息
                this.$http.post("getBorrowList", this.queryMap).then(res => {
                    this.borrowList = res.data.borrowList.list
                    this.total = res.data.borrowList.total
                    let 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 = 2
                    this.lengthSpan2 = 6
                }
                this.queryMap.page = 1
                this.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: '',//借款类型id
                    page: 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之后的查询条件赋给原queryMap
                this.queryMap.lendTime = this.queryMap1.lendTime
                if (this.queryMap.lendTypeId == '' && this.queryMap.lendTime == '') {
                    this.lengthSpan1 = 0//控制"显示所有"功能的显隐
                    this.lengthSpan2 = 8
                }
                if (this.queryMap.lendTypeId != '' || this.queryMap.lendTime != '') {
                    this.lengthSpan1 = 2
                    this.lengthSpan2 = 6
                }
                this.queryMap.page = 1
                this.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 = 0
                    this.lengthSpan2 = 10
                }
                if (this.queryMap.pname !='') {

                    this.lengthSpan1 = 2
                    this.lengthSpan2 = 8
                }
                this.queryMap.page = 1;//将页码重置回第一页，主要作用是查找时如果当前页面是第二页，那么查找将会从第二页开始，造成查找缺失，所以要
                this.getStaffList()           //先将页码归一，让其从第一页开始查询
            },

但是这种方法有两个问题：

1、注意第一个代码段，用的标签是普通的<input>而不是<el-input>，原因是在添加ref="names"后<el-input>会出现输入名字直接清除输入的情况

2、在使用普通<input>标签后，也就放弃了elementUI自带的输入框样式，所以需要重新调整样式

因此这种方法也可以解决本文的错误，但是使用起来不是特别方便

以上就是我对该问题的叙述，请大家批评指正。谢谢大家。