element-UI之el-select的坑

element-UI之el-select的坑

前言

开发项目的时候发现el-select还是挺好用的，可是开发完成测试的时候，被一个他自带的bug恶心到了。

背景

项目中下拉框选项有很多，所以支持搜索功能是必不可少的，本来觉得可以偷懒不用为搜索费太多心思，可偏偏问题出就出在这个filterable上，饿了么在带有filterable属性的下拉框中，搜索完后，如果此时焦点还在当前select上，切屏等操作回来后，select会自动弹出，上网找了一波，几乎没有关于这个bug的（可能这才是别人想要的效果吧）

解决思路

一番琢磨后发现，只有选择完不做任何操作进行切屏才会复现现象，所以我觉得这应该是select选择后，焦点还停留在被选择过的select组件上导致的，所以能不能在选择的时候获取焦点，选择好了，失去焦点，这不就完了嘛

解决方法

果然被我找到了一个好东西visible-change，直接上官网介绍：

解决方法直接上代码：

				<el-select clearable
                           ref="model"
                           filterable
                           @visible-change="changeFocus"
                           @focus="loseBlur"
                           v-model="postSale.flowModel"
                           placeholder="请选择执行类别"
                           :validate-event="false">
                  <el-option v-for="flow in flowModels"
                             :key="flow.template_num_id"
                             :value="flow.template_num_id"
                             :label="flow.template_name">el-option>
                el-select>

changeFocus (val) {
   if (val) {
     this.$refs.model.focus()
   } else {
     this.$refs.model.blur()
   }
 }

这样就完美解决啦

写在最后的废话

其实我是感觉饿了么这么做也是有一定道理的，当你在带有搜索功能的select组件中移除时，可能他考虑的是你去找你要搜的内容，所以回来他就自动弹出选中，方便你搜索。。。。哈哈哈哈
如有不足之处还请多多指教哟