原本的下拉框:
![](https://i-blog.csdnimg.cn/blog_migrate/3bfc23249a4596a53552e5b42c160b89.png)
效果:
![](https://i-blog.csdnimg.cn/blog_migrate/02a1a734f9994b4b6f10f32c80f62c0e.png)
这种下拉框只能选择给出的选项,要想一边输入一边得到提示就要给<el-select>加一个属性:filterable
意思是可过滤的,可以通过你输入的文字过滤(模糊查询)已有的选项,如:
![](https://i-blog.csdnimg.cn/blog_migrate/931d182796a67a4672ce6ff7a8ef1934.png)
效果:
![](https://i-blog.csdnimg.cn/blog_migrate/058c1e78fec583697423c4adb21495a9.png)
但是这种下拉框只能选择已有选项
和filterable配套使用的另一个属性也很好用:allow-create
意思是允许创建,使用这个属性之前是只能选择给出的选项,加上这个属性之后可以创建出选项中不存在的选项,如:
![](https://i-blog.csdnimg.cn/blog_migrate/432e89a4c3bb50ff2a22416e91f46265.png)
效果:
![](https://i-blog.csdnimg.cn/blog_migrate/1533c03714c31e609359695841bd22f4.png)
选择之后:
![](https://i-blog.csdnimg.cn/blog_migrate/77af52058364628a549c6f0913c107c2.png)
要注意一定要和filterable配套使用,否则没有效果