iview爬坑之旅——远程搜索选择最后一个选项会重复请求

引言：

刚刚开始入手iview,之前一直用element。慢慢摸索慢慢爬坑，今天说一下iview的select远程搜索相关问题；

一、选择最后一个option会重复发送请求

1. 问题

如下图远程搜索出现对应的下拉选项接口请求正常，但是当我选择option的时候又会发送一样请求，由于接口传入的不是ID了所以会报错；


重复请求报错了：

研究了一下这个是iview框架的问题，就是选择最后一个选项会重复发送请求，那么怎么解决这个问题？网上查找了一下很多用的是节流函数，限定一个时间，只在时间内触发；我也试过了，但是就是不起作用，心也是醉了，另辟新径吧。。。

2.解决办法

先附上一段代码：

 <Select v-model="operationRelatedPlanId" placehoder="请输入课程ID"
   clearable
   filterable
   remote
   :remote-method="searchPlanId"
   :loading="loading"
   label-in-value
   @on-change="onRelatedPlanChange"
 >
 	<Option v-for="(option, index) in operationRelatedPlans" :value="option.id" :key="index">{{ option.name }}</Option>
  </Select>

async searchPlanId(query) {
   this.loading = true
   //v-model绑定的值与remote-method返回的query作对比，不一样就return; 避免选中option重复请求
   if (this.operationRelatedPlanId && query !== this.operationRelatedPlanId) {
     this.operationRelatedPlanId = ''
     return
   }
   const [res, err] = await this.$service.course.searchPlanId(query.trim())
   this.operationRelatedPlans = []
   for (let result of res) {
     if (result && result.ok && result.data && result.data.id) {
       if (result.data.stateValue === 20) {
         if (result.data.id !== this.$route.query.id) {
           this.operationRelatedPlans.push({
             id: result.data.id,
             name: result.data.name
           })
         }
       }
     }
   }
   this.loading = false
 },

解决办法就是在每次remote-method方法searchPlanId执行前判断你的query与v-model绑定的值是不是相等，如果不相等就return；不再发送请求了；同时也正好解决了选中之后内容清空！

 if (this.operationRelatedPlanId && query !== this.operationRelatedPlanId) {
 	// 内容清空
     this.operationRelatedPlanId = ''
     return
   }

但是这个只是表面上解决了不再重复发送请求，在根源还是没有解决。不管了先这么用吧静等iview更新！

二、重复输入两次一样的query第二次不发送请求

1.问题

场景1：第一次我输入了一个query，出现下拉框，第二次又输入相同的query这个时候就不会发送远程请求；也就是不会执行:remote-method的方法；开始觉得这个不是什么问题只是很好奇，然后看了一下源码；

源码的含义大概是：当query不为空且不等于上一次查询的query时 才会执行远程搜索的方法，而这个query每次查询都会在源码里面有个暂存，所以输入两次相同的query,不会执行搜索方法；

场景2：远程搜索是根据选择的type决定的，也就是说你选择了”文章“如果搜索了”视频“的ID是不能搜索出来的，只能在切换到”视频“，输入相同的ID就应该可以搜出对应的视频；然后场景一的问题出来了，由于query相同，切换之后不再发送请求了；

2.解决办法

在每次切换的时候清空搜索内容，源码里有这么一段：

所以我们直接调用这个方法就好：设置<select ref="select">

this.$refs.select.setQuery(null)

因为用了typescript,vscode会报错

Property 'setQuery' does not exist on type 'Vue | Element | Vue[] | Element[]'.
Property 'setQuery' does not exist on type 'Vue'.Vetur(2339)

所以：

 ;(this.$refs.select as Vue & { setQuery: Function }).setQuery(null)

上面涉及到TS的类型断言，交叉类型等就不细说了，可以看其他的详细介绍。。。至此功能就实现了；

---

暂时结束，后续有问题继续更新。。。