element ui -> select 既可输入又可选择

7,406 阅读1分钟

今天遇到这么一个需求:当输入名字时,要是下拉选项中有你需要的你可以选择其中的一个选项,要是没有的话,你可以自己输入,element ui中的el-select组件中有一个default-first-option属性配合filterable回车事件可以选中,但是不满足需求,需求是输完失焦即将数据写上(充当输入框)

image.png

此时,我添加了一个失焦事件@blur="selectBlur($event)"

selectBlur(e) {
      if (e.target.value) {
        this.$set(this.owner, 'name', e.target.value);
      }
    }

完美当做输入框用~