el-select下拉单选,可手动输入,选择下拉后支持修改

289 阅读1分钟
<el-select id="selectInput" v-model="ruleForm.specificProject" clearable filterable allow-create placeholder="请选择" ref="searchSelect" @visible-change="visibleChange" @focus="selectFocus" @change="selectChange">
     <el-option v-for="(item,index) in optionList" :key="index" :label="item.label" :value="item.value"></el-option>
</el-select>
 
data:{
  optionList: []
}

visibleChange (val) {
   if (!val) {
      let input = this.$refs.searchSelect.$children[0].$refs.input;
      input.blur();
   }
},
selectFocus (e) {
    let value = e.target.value;
    setTimeout(() => {
      let input = this.$refs.searchSelect.$children[0].$refs.input;
      input.value = value;
    })
},
selectChange (val) {
    console.log(val, '--------167')
    // this.ruleForm.specificProject = val
 },