持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第8天，点击查看活动详情

前言

最近在做项目，遇到了一些问题，这里把这些问题研究的过程记录下来，方便后续遇到可以快速查阅。

问题

之前我在这篇文章《el-select使用index做key遇到的问题》讲到，因为我使用了filter-method方法来实现自定义搜索，如果el-option使用了index做key，会导致输入的value会被清空。

所以推荐使用value做key。

那么我会有个疑问，为什么el-select的本身的过滤搜索（通过filter属性）没有这个问题？它使用index做key，并不会导致输入的value会被清空。

带上这个疑问，就只能去看看el-select源码了。

首先输入会触发input事件，el-select这里使用了防抖。

query记录的是上一次输入的，selectedLabel是当前实时输入的，所以是不相等的。

所以我们就触发了handleQueryChange方法

handleQueryChange这个方法是针对输入的val做的逻辑处理。

我们进入了这个条件逻辑，会触发el-option的queryChange方法，把query，也就是val当作参数传入。

接下来去el-option组件找一下queryChange方法，可以看到，如果query和当前的label是否匹配，并把它赋值给this.visible。

如果匹配，则this.visible为true。

而el-option组件是通过this.visible来控制组件显隐的。

因为它是用的v-show指令，所以只是给当前设置了display:none，并不会跟filter-method方法一样，会触发value的watch。

实践一下，可以看到确实加了display:none。

总结

el-select的filter属性主要是使用v-show来控制el-option的显隐。不会触发value的watch。

而filter-method方法里，会对options重新赋值，用index做key，会导致value的watch，从而导致输入的value会被清空。