el-select 输入下拉搜索，匹配不到数据时也保留输入值，同时input获取焦点时保留其value值(el-select支持手动输入搜索)

梦里梦外; 2023-01-17 02:28 128阅读 0赞

需要注意的地方

1. 为了在匹配不到数据时也保留其输入的值，可以用 filter-method 自定义筛选

2. el-select添加上filterable之后，点击展开，点击收起，会导致focus和blur事件不触发，但点击页面其他地方才可正常触发 ，可利用visible-change 事件来解决些问题

3. input获取焦点时保留其value值用focus事件做相关赋值处理

具体实现代码如下

<template>
      <el-select id="selectInput" v-model="value" filterable placeholder="请选择" ref="searchSelect" :filter-method="dataFilter" @visible-change="visibleChange" @focus="selectFocus" @blur="selectBlur" @change="selectChange">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
    </template>
    
    <script>
      export default {
        data() {
          return {
            options: [{
              value: '选项1',
              label: '黄金糕'
            }, {
              value: '选项2',
              label: '双皮奶'
            }],
            optionsFilter: [{
              value: '选项1',
              label: '黄金糕'
            }, {
              value: '选项2',
              label: '双皮奶'
            }],
            value: ''
          }
        },
        methods: {
            dataFilter(val) {
                this.value = val;
                if (val) {
                this.options = this.optionsFilter.filter((item) => {
                    if (item.label.includes(val) || item.label.toUpperCase().includes(val.toUpperCase())) {
                      return true
                    }
                })
                } else {
                this.options = this.optionsFilter;
                }
        },
        selectFocus(e){
          let value = e.target.value;
           setTimeout(() => {
              let input = this.$refs.searchSelect.$children[0].$refs.input;
              input.value = value;
          })
        },
        selectBlur(){
          //console.log('失去')
        },
        selectChange(){
    
        },
        visibleChange(val){
          if(!val){
            let input = this.$refs.searchSelect.$children[0].$refs.input;
            input.blur();
          }
    
        }
        }
      }
    </script>