2020-09-15

项目场景：

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

filterable allow-create  default-first-option

即：

---

问题描述：

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

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

原因分析：

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

---

解决方案：

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

html代码如下:

js代码如下：

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