由于elemtntui的select远程搜索在中文搜索时，只有空格选中汉字才会生效，所以可以使用input的原生事件手动触发该事件
- 原生事件
- compositionstart：在输入中文或者语音等需要等待一连串的输入的操作之前，compositionstart 事件会触发
- compositionend：在输入中文或者语音等完毕或取消时，compositionend 事件会触发，compositionend 在 input 事件之后触发
- input事件，不用多说，输入时就会触发
- 找到input输入框之后，监听事件，然后进行自定义事件的触发。由于这里我们需要在输入完成后进行搜索，所以，这里使用compositioned事件
- 给el-select添加一个ref，通过this.$refs.ref.$el.children[0].children[0]找到input标签
- 监听input的原生事件
- HTML代码
<el-select ref="elSelect" v-model="value" remote clearable :remote-method="search">
<el-option v-for="item in options" :key="item.name" :label="item.name" :value="item.name">
</el-option>
</el-select>
- JS代码
data() {
return {
value: '',
options: [],
}
},
mounted() {
//找到input标签
let typeEle = this.$refs.type.$el.children[0].children[0]
//监听事件，查询下拉框
typeEle.addEventListener('compositionend', e =>{
this.search(e.target.value)
});
},
methods: {
//根据名称，模糊查询对应的下拉框数据
async search(query) {
//调用接口，查询下拉框的options
this.options= await requestPort.fuzzyQuery('url', {name: query})
},
}
