Element el-select 选择框选中后可删除

 选中选择项后可删除选项内容

 选择黄金糕后删除糕字

效果如下：

 

<template>
  <el-select ref="searchSelect" v-model="value" filterable placeholder="请选择" @visible-change="handleChange" @focus="selectFocus"
             @blur="(ev)=>{value = ev.target.value}">
    <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: {
    selectFocus (e) {
      let value = e.target.value;
      setTimeout(() => {
        // 多个select时可根据refs获取，设置ref时可为'searchSelect' + index,取值为this.$refs['searchSelect' + index][0].$children[0].$refs.input
        let input = this.$refs.searchSelect.$children[0].$refs.input;
        input.value = value;
      })
    },
    handleChange (val) {
      if (!val) {
        this.$refs.searchSelect.$children[0].$refs.input.blur();
      }
    }
  }
}
</script>