ElementPlus select选择器解决输入内容,失焦,输入内容消失问题

413 阅读1分钟
  • 需求:select框既可以选择也可以进行输入,但是默认的ElementPlus select 输入之后未点击option选项 而是点击空白处(失焦),输入内容消失。

-** 解决办法**:使用官网的blur函数 进行解决。参数写成eventevent(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;

    }

}