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

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

解决方案:

  1. 引入组件 用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>
  1. 在mounted生命周期中调用原生input事件,通过this.$refs获取组件
 mounted() {
    this.$refs.elSelec.$el.getElementsByTagName('input')[0].oninput = (e)=>{
      this.$refs.elSelec.remoteMethod(e.target.value)
    }
  },
Logo

前往低代码交流专区

更多推荐