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组件中移除时,可能他考虑的是你去找你要搜的内容,所以回来他就自动弹出选中,方便你搜索。。。。哈哈哈哈
如有不足之处还请多多指教哟