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)
}
},