Vue element-plus 实现选择器可输入

下拉框数据量比较大的时候，翻找选项就费力气费时间了，之前反复搜索过带输入框的选择框，找到的都是用v-if实现输入框与选择框切换的方案，但既不美观也不能共联，输入和选择只能二选一。后来翻element官方文案才发现自己搜错关键词了，官方把这种自带输入框的选择框叫做带筛选功能，添加filterable属性就可以输入了。

当然比起我想要的效果还有点差距，比如输入想要的名字后必须再点击一下选项，否则就会清空，也不能输入选项里没有的。考虑之后再优化一下，不过现有的已经满足需求了。

<el-select v-model="formData.gid" 
    @change="countryChange" 
    :value-on-clear="null" 
    placeholder="" 
    style="width: 200px" 
    filterable 
    clearable>
  <el-option 
      v-for="item in countryData" 
      :key="item.gid" 
      :label="item.cnname" 
      :value="item.gid"/>
</el-select>

后面又遇到了选择器问题，发现element也提供了输入选项中没有的解决方案

<el-select v-model="tagChoose"
     multiple
     filterable
     allow-create
     default-first-option
     :reserve-keyword="false"
     :value-on-clear="null"
     placeholder="可输入"
     style="width: 500px">
   <el-option
       v-for="item in tag"
       :key="item.tagid"
       :label="item.name"
       :value="item.tagid"
   />
</el-select>

allow-create属性可以自由输入，default-first-option可以用回车把输入内容转换成新选项（直接点击也可以），reserve-keyword设置为false可以隐藏输入内容。

这样业务需求就大多满足了