vue中使用element-ui的el-select单选远程搜索功能，文本输入不能及时发送请求

@[TOC]vue中使用element-ui的el-select单选远程搜索功能，文本输入不能及时发送请求在element-ui中使用el-select远程搜索时，输入文本搜索无法及时发送网络请求获取数据，需要按下删除或者回车才能刷新选择框，但是选择一个值后会发现无法在去请求新的数据了。加入可多选属性时就没有这个问题。引入组件用ref绑定节点<el-form-item label="产品名称

杨小凹

3710人浏览 · 2021-05-28 11:57:19

杨小凹 · 2021-05-28 11:57:19 发布

el-select单选远程搜索功能，文本输入不能及时发送请求

在element-ui中使用el-select单选远程搜索时，输入文本搜索无法及时发送网络请求获取数据，需要按下删除或者回车才能刷新选择框，但是选择一个值后会发现无法在去请求新的数据了。加入可多选属性时就没有这个问题。

解决方案:

引入组件用ref绑定节点

<el-form-item label="产品名称：" prop="productName">
   <el-select ref="elSelec" placeholder="请输入产品名称" filterable remote v-model="ruleForm.productName" :remote-method="remoteMethod" :loading="loading">
       <el-option
         v-for="item in productArr"
         :key="item.id"
         :label="item.productName"
         :value="item.projectCode">
       </el-option>
    </el-select>
</el-form-item>

在mounted生命周期中调用原生input事件，通过this.$refs获取组件

 mounted() {
    this.$refs.elSelec.$el.getElementsByTagName('input')[0].oninput = (e)=>{
      this.$refs.elSelec.remoteMethod(e.target.value)
    }
  },