当前位置: 首页>后端>正文

elementui的select远程搜索,中文时,在用数字选入汉字后不会触发remote-method的问题

由于elemtntui的select远程搜索在中文搜索时,只有空格选中汉字才会生效,所以可以使用input的原生事件手动触发该事件

  1. 原生事件
  • compositionstart:在输入中文或者语音等需要等待一连串的输入的操作之前,compositionstart 事件会触发
  • compositionend:在输入中文或者语音等完毕或取消时,compositionend 事件会触发,compositionend 在 input 事件之后触发
  • input事件,不用多说,输入时就会触发
  1. 找到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})
    },
    }

https://www.xamrdz.com/backend/3xy1997452.html

相关文章: