下拉可创建条目，下拉框获取焦点输入时，已有值被清空

问题图： 

处理后图：

方法一：

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" @visible-change="visibleChange" @focus="selectFocus" @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: {
     selectFocus(e){
       let value = e.target.value;
        setTimeout(() => {
           let input = this.$refs.searchSelect.$children[0].$refs.input;
           input.value = value;
       })
     },
     visibleChange(val){
       if(!val){
         let input = this.$refs.searchSelect.$children[0].$refs.input;
         input.blur();
       }
      
     }
     }
   }
 </script>

方法二：

<template>
   <el-select id="selectInput" v-model="value" filterable placeholder="请选择" ref="searchSelect" @visible-change="visibleChange">
     <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: {

// 根据值过滤label
            filterLabelByValue(value, compareKeyType, valueKeyType) {
                const self = this;
                const optionItems = self.field.options.optionItems;
                let model = '';

                if (self.field.options.groupable) {
                    optionItems.forEach((el) => {
                        el.children.forEach((item) => {
                            if (item[compareKeyType] == value) {
                                model = valueKeyType ? item[valueKeyType] : item[compareKeyType];
                            }
                        })
                    })
                } else {
                    optionItems.forEach((item) => {
                        if (item[compareKeyType] == value) {
                            model = valueKeyType ? item[valueKeyType] : item[compareKeyType];
                        }
                    })
                }
                return model ? model : value;
            },

     visibleChange(val){
       if(!val){
         let input = this.$refs.searchSelect.$children[0].$refs.input;
         input.blur();
       }
      
     }
     }，

mounted() {
            const self = this;
            if (this.field.options.allowCreate) {
                const input = this.$refs.fieldEditor.$el.getElementsByTagName('input')[0];
                const optionItems = self.field.options.optionItems;

                // 监听输入事件
                input.oninput = (e) => {
                    const value = e.target.value;
                    if (optionItems && optionItems.length) {
                        self.fieldModel = self.filterLabelByValue(value, self.labelKey);
                    } else {
                        self.fieldModel = value;
                    }
                    self.syncUpdateFormModel(self.fieldModel);
                }

                // 监听获取焦点
                input.onfocus = (e) => {
                    setTimeout(() => {
                        if (optionItems && optionItems.length) {
                            e.target.value = self.filterLabelByValue(this.fieldModel, self.valueKey, self
                                .labelKey);
                        } else {
                            e.target.value = this.fieldModel;
                        }
                    });
                }
            }
        },

   }
 </script>