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

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)
    }
  },
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

杨小凹

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值