项目场景：

---

问题描述

可以输入的下拉框，在element-ui中 可以找到的是 input 组件 中-带输入建议 的可以达到效果

 当是下拉框时，匹配输入的值与下拉框的数据，如果可以匹配，那么就选择那条，如果不能匹配那么，保留输入的值

---

分析：

可以输入的下拉框，既可以是 下拉框 又可以是 输入框，所以，它可以绑定输入框的change事件又可以绑定下拉框的select事件

---

实例：

1：html部分

<el-form-item label="收款单位（账户名）" prop="payee" >
    <el-autocomplete
    class="inline-input"
    v-model.trim="addPayOffForm.payee"
    :fetch-suggestions="querySearch"
    placeholder="请输入内容"
    :trigger-on-focus="true"
    @select="selectVal"
    @change="changeIpt"
    ></el-autocomplete>
</el-form-item>

2：js部分

// 收款单位 带输入建议 的方法
querySearch(queryString, callback) {
   let restaurants = this.yiFangDanWeiList;
   let results = queryString ? 
        restaurants.filter(this.createFilter(queryString)) : 
        restaurants;
   callback(results);// 调用 callback 返回建议列表的数据
},
createFilter(queryString) {
   return (restaurant) => {
     return (
          restaurant.value.toLowerCase().indexOf(
            queryString.toLowerCase()
          ) === 0
     );
   };
},

// 当输入选择框  为输入框时  的方法
changeIpt(val){
   this.addPayOffForm.payee=val;
},


// 当输入选择框  为选择框时  的方法
selectVal(val){
   this.addPayOffForm.payee=val.value;
,