element UI 实现回车键搜索所有已经过滤的选项

Kevin Yu-yzt

已于 2024-09-03 13:44:37 修改

阅读量330

点赞数 2

文章标签： vue.js javascript elementui

于 2024-09-03 13:43:03 首次发布

本文链接：https://blog.csdn.net/weixin_57509186/article/details/141859504

版权

通过在element 选择器的过滤功能，点击回车使得实现过滤的选项搜索

@keyup.native.enter=“searchData1” 控制搜索事件

@keydown.native.enter="hideBjd" 控制搜索后隐藏下拉框事件

代码示例（截取一部分）

HTML部分

<el-form-item label="报警点">
  <el-select v-model="bjdSelect" ref="bjdSel" :disabled="isDiasbled" filterable style="width: auto" class="forms" popper-class="dropdown"
   placeholder="全部" @change="selectBjd" @keyup.native.enter="searchData1" @keydown.native.enter="hideBjd">
  <el-option v-for="item in optionsBjdSel" :key="item.code" :label="item.name" :value="item.code">

  </el-option>
 </el-select>
</el-form-item>

searchData1(event){
      this.editData=[]
      this.bjdSelect = event.target.value
      this.jkdxCode = event.target.value//这段是实现模糊匹配的代码赋值到搜索条件
      this.currentPageClz = 0
      this.loadingClz = true
      this.isMoreClz = false
      this.isDiasbled=true
      // 以下为重点代码！！实现下拉框过滤后的所有选项获取 模糊匹配的话可以忽略此段
      const filteredOptions=this.optionsBjd.filter(
        (option)=>option.name.includes(event.target.value)
      )
      var selOptionBjd=[]
      filteredOptions.forEach(item=>{
        selOptionBjd.push("'"+item.code+"'")
      })
      this.selBjdss=selOptionBjd.join(',')
      console.log(this.selBjdss);
      setTimeout(() => {
        this.getDataList(this.jkdxCode, this.xh, this.jkdxType)
      }, 1000)

    },
    // 回车后隐藏下拉框
    hideBjd(){
      setTimeout(()=>{
        this.$refs.bjdSel.visible=false
      },200)
    },