el-select实现可下拉选择和手动输入

<el-select
     v-model="form.produce"
     clearable
     filterable
     placeholder="请选择产品"
     allow-create
 >
     <el-option
         v-for="item in produces"
         :key="item.value"
         :label="item.label"
         :value="item.value"
     />
 </el-select>

我们可以在elementUi官方文档中看到,已经帮我们写好了相应的属性,我们直接使用就可以啦~~~~

注意搭配filterable使用哦~,不用遗漏了

---------------------------------------------------优化----------------------------------------------------------------------

但是我们写好之后发现没有达到最佳的效果,需要手动去选择或点击回车才能将我们手动输入的值填充到框中

用到select的blur事件

<el-select
   v-model="form.produce"
   clearable
   filterable
   placeholder="请选择产品"
   @blur="productSelect"
   allow-create
>
   <el-option
       v-for="item in produces"
       :key="item.value"
       :label="item.label"
       :value="item.value"
   />
</el-select>




productSelect(e) {
     let value = e.target.value; // 输入框值
      if(value) { // 只有输入才有这个值，下拉框选择的话 这个值为空
          this.form.produce = value
      }
  }

使用ref来进行赋值

<el-select
   v-model="form.produce"
   ref="produceRef"
   clearable
   filterable
   placeholder="请选择产品"
   @blur="productSelect"
   allow-create
>
   <el-option
       v-for="item in produces"
       :key="item.value"
       :label="item.label"
       :value="item.value"
   />
</el-select>




productSelect() {
    this.form.produce = this.$refs.produceRef.selectedLabel
   )

使用allow-create 输入内容优先匹配项，没匹配到会创建输入得项