项目场景：

vue + element ui 中，select框实现可输可选功能，原利用el-select的属性，添加 

filterable allow-create  default-first-option

即：

<el-select v-model="dataForm.newData" placeholder="请选择或手动输入" filterable allow-create default-first-option clearable>
  <el-option v-for="item in selectOptions" :key="item.value" :label="item.label" :value="item.value">
  </el-option>
</el-select>

问题描述：

以上的设置，当输入的数据和select下拉框中的可选项一致时，只能进行选择，不能实现输入。

例如：下拉框中有一个label为host,value为192.168.1.110的选项。当在输入栏中输入字符串host时，并不能实现将字符串“host”赋给想要的变量，只能进行选择。导致结果不符合用户要求。

原因分析：

element ui自带属性，已查询select列表的值为入口，如果查询不到就进行创建，输入的数据通过创建select列表，选择后展示。对于输入和列表数据重名的情况，不会进行新建。

解决方案：

不采用element ui现有的属性信息，编写@blur方法，完成变量的赋值。详情如下：

html代码如下:

<el-select v-model="dataForm.newData" placeholder="请选择" filterable @blur="selectBlur($event)" clearable>
  <el-option v-for="(item,index) in selectOption" :key="index" :label="item.label" :value="item.value">
  </el-option>
</el-select>

js代码如下：

 selectBlur(e) {
   self.dataForm.newData = e.target.value;
 },