思路
- filterable属性,是否可搜索,为true后select组件可以输入值了
- el-select组件输入值是不会更改v-model的值的,而是选择选项后才更改,所以我们可以在输入触发的方法中手动更改v-model绑定的值,这个方法就是filter-method
- filter-method方法,在输入框输入值的时候会触发,就相当于el-input组件的input方法,这时修改v-model绑定值,即可实现失焦输入框中值不会失去,同时添加自定义参数,便于多个select组件情况下更方便地更改对应v-model绑定的值
allow-create,是否允许用户创建新条目,需配合 filterable 使用
default-first-option,在输入框按下回车,选择第一个匹配项。需配合 filterable 或 remote 使用
<el-select
v-model="form.hello"
placeholder="请选择"
filterable
allow-create
clearable
default-first-option
:filter-method="(value) => dataFilter(value, 'hello')">
<el-option
v-for="item in options"
:key="item.val"
:label="item.name"
:value="item.val"></el-option>
</el-select>
methods: {
dataFilter(val, key) {
this.form[key] = val;
},