- 需求:select框既可以选择也可以进行输入,但是默认的ElementPlus select 输入之后未点击option选项 而是点击空白处(失焦),输入内容消失。
-** 解决办法**:使用官网的blur函数 进行解决。参数写成event 是 vue 提供的特殊变量,用来表示原生的事件参数对象 event。)
<el-select v-model="selectId" @blur="onBlur($event)">
<el-option v-for="(item, i) in list" :key="i" :label="item.label" :value="item.value"> </el-option>
</el-select>
onTypeBlur(e) {
if (e.target.value.trim() !== '') {
let label = e.target.value;
let value = '';
for (let i = 0; i < this.list.length; i++) {
let obj = this.list[i];
if (obj.label == label) {
value = obj.value;
}
}
if (value == '') {
ElMessage.error({
message: 'selectId',
showClose: true,
});
}
this.selectId = value;
}
}