vue+el-select实现既能下拉选择，又能直接输入

1、官网方式

实现方式：在现有的下拉表单基础上，给el-select添加属性“filterable，allow-create，default-first-option”即可

<template v-for="(taskItem, index) in formInfo.dataList">
	<el-form-item label="类型" :prop="'dataList.' + index + '.lingyu'" :ref="'dataList.' + index + '.lingyu'" class="record-inputs">
	  <el-select 
	    v-model="taskItem.type" 
	    clearable
	    filterable
	    allow-create
	    default-first-option
	    placeholder="请输入或选择" 
	    class="record-input" 
	    :popper-append-to-body="false"
	    >
	    <el-option v-for="(item, index) in lingyu" :key="index" :label="item.label" :value="item.value"></el-option>
	  </el-select>
	</el-form-item>
</template>

上述方式有一个缺点，即失去焦点后会自动清空，效果不好（输入完成后，不能像正确的输入框一样，需要对下拉框进行选择）

2、优化（给value赋值）

添加@blur函数，失去焦点时，执行该方法，将输入的值赋值给绑定的变量

<template v-for="(taskItem, index) in formInfo.dataList">
	<el-form-item label="类型" :prop="'dataList.' + index + '.lingyu'" :ref="'dataList.' + index + '.lingyu'" class="record-inputs">
	  <el-select 
	    v-model="taskItem.type"
	    clearable 
	    filterable
	    allow-create
	    default-first-option
	    placeholder="请输入或选择" 
	    class="record-input" 
	    @blur="e=>selectBlur(e, index)"
	    @change="val=>selectChange(val,index)"
	    :popper-append-to-body="false"
	    >
	    <el-option v-for="(item, index) in lingyu" :key="index" :label="item.label" :value="item.value"></el-option>
	  </el-select>
	</el-form-item>
</template>

method中：

   selectBlur(e,index){
     this.formInfo.dataList[index].lingyu = e.target.value
   },
   selectChange(val,index){
     this.formInfo.dataList[index].lingyu = val
   },

注意：@blur="e=>selectBlur(e, index)"中，是组件方法传参时传自带参数以及其他参数

3、扩展

通常想在组件自带的函数会返回默认的值，有时候想要传递一些自定义的参数
方法1：使用$event

@change="selectChange($event,'aaa')"

方法2：使用箭头回调函数

@change="((val) => selectChange(val,'bbb'))"