项目场景:
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列表,选择后展示。对于输入和列表数据重名的情况,不会进行新建。
<