一个特殊下拉选择

🍉【主要功能】：

样例为粗例，暂未优化。基于element 的el-select。主要功能是当输入值不与下拉数据匹配时，将该输入值获取。本样例客制化严重。如要封装到自己框架的话，请用心修改。element-ui本身也提供了类似的方法，（filterable，default-first-option）两个属性。看需求取用吧

🎨示例：

1.输入x时匹配出相关信息

2.输入pppp时，匹配无数据

3.失焦时pppp保留在输入框内

4.再次选择时，初始化选择列表。置灰pppp

🍉代码：

<template>
  <el-select
    id="selectInput"
    ref="searchSelect"
    v-model="num"
    filterable
    placeholder="请选择"
    :filter-method="dataFilter"
    @visible-change="visibleChange"
    @focus="onFocus"
    @blur="onBlur"
    @change="onChange"
  >
    <el-option
      v-for="item in options"
      :key="item.account"
      :label="item.name"
      :value="item.account"
    >{{ item.name }} </el-option>
  </el-select>
</template>

<script>
export default {
  name: 'KeepSelectValue',
  model: {
    prop: 'value',
    event: 'change',
  },
  props: {
    jsonData: {
      type: Array,
      default: () => [],
    },
    wants: {
      type: String,
      default: 'id',
    },
    value: {
      type: [String, Number],
      default: "",
    },
  },
  data() {
    return {
      options: this.jsonData,
      num: this.value,
      optionsFilter: this.jsonData,
    };
  },
  watch: {
    value: {
      handler(val) {
        this.num = val;
      },
      immediate: true,
      deep: true,
    },
  },

  methods: {
    dataFilter(val) {
      this.num = val;
      if (val) {
        this.options = this.optionsFilter.filter((item) => {
          if (item.name.includes(val) || item.name.toUpperCase().includes(val.toUpperCase())) {
            return true;
          }
        });
      } else {
        this.options = this.optionsFilter;
      }
    },
    onFocus(e) {
      this.options = this.jsonData;
      const value = e.target.value;
      setTimeout(() => {
        const input = this.$refs.searchSelect.$children[0].$refs.input;
        input.value = value;
      });
    },
    onBlur() {
      console.log(this.num, 'sssss');
      this.$emit("update:value", this.num);
      this.$emit("change", this.num);
    },
    onChange(val) {
      this.$emit("update:value", val);
      this.$emit("change", val);
    },
    visibleChange(val) {
      if (!val) {
        const input = this.$refs.searchSelect.$children[0].$refs.input;
        input.blur();
      }
    },
  },
};
</script>