链接：https://codepen.io/liniaa/pen/PooGoMM?&editable=true

这个产品设计实际有缺陷的，如果有a,ab那么只能选中a,解决方案是设置个定时器更新value,

如果继续输入则关闭定时器，不过还不如让用户选，产品设计有缺陷

<script src="//unpkg.com/vue/dist/vue.js"></script>
var Main = {
    data() {
      return {
       optionsCopy: [{
          value: '1',
          label: 'meat'
        }, {
          value: '2',
          label: 'drink'
        }, {
          value: '3',
          label: 'food'
        }, {
          value: '4',
          label: '龙须面'
        }, {
          value: '5',
          label: '北京烤鸭'
        }],
        options: [{
          value: '1',
          label: 'meat'
        }, {
          value: '2',
          label: 'drink'
        }, {
          value: '3',
          label: 'food'
        }, {
          value: '4',
          label: '龙须面'
        }, {
          value: '5',
          label: '北京烤鸭'
        }],
        value:""
      }
    },
  methods:{
      change(val) {
       // this.value = val;
        if (val) { //val存在
          var _this=this
          this.options = this.optionsCopy.filter((item) => {
            if (!!~item.label.indexOf(val) || !!~item.label.toUpperCase().indexOf(val.toUpperCase())) {
              console.log(item.label,'----',val)
            if(item.label===val){
        //如果要继续输入的可以匹配这里定时器更新，并且输入时候需关闭定时器
              this.value=item.value
           
             this.$refs.mySelect.blur()
            }
              return true
            }
            
          })
        } else { //val为空时，还原数组
          this.options = this.optionsCopy;
        }
      }
    }
    
  
  }
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')
<script src="//unpkg.com/element-ui@2.12.0/lib/index.js"></script>
<div id="app">
<template>
  {{value}}
  <el-select v-model="value" filterable placeholder="请选择" :filter-method="change" ref="mySelect">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
</template> 
</div>

搜索