昨天下班时leader说线上有个bug，作者不在让我留下帮忙改一手，虽然从发现问题到解决也就10分钟的事，但我还是在这里记录一下，以免更多的前端同胞入坑
这个项目里的 <el-select> 用到了好多属性：
-
filterable可搜索 -
remote可远程搜索 -
remote-method远程搜索的方法 -
clearable可清空选项 -
multiple多选 -
value-key作为 value 唯一标识的键名，绑定值为对象类型时必填 -
visible-change下拉框出现/隐藏时触发
出错的现象是这样的：
搜索ccc并选中，结果回显被选中的名字是aaa，下拉选中的是ccc？！
删改了几个属性发现：点击select下拉框获取全部数据，多选其中几项，ok没问题；
按关键字搜索快速选择所需数据，单选没问题；
错误现象
为什么会这样呢，一切的一切都是因为在
vue 中 v-for 的 key 不要用 index！！！，因为如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序， 而是简单复用此处每个元素。
我搜索了ccc，当时的下拉选项只剩ccc，它当时的index是0，由于多选的需求，我还要继续选其他选项，所以当下拉选项为全集时，全集中index为0的项就被选中了。这也说明了为什么只是多选时没有问题、单选搜索时也没有问题，因为只有在多选搜索时下拉的全量才会来回变换。
！！！这是错误代码不要学！！！
错误代码
正确的写法是用 key 绑定唯一标识的键名
<el-select
v-model="form.source"
filterable
remote
:remote-method="remoteMethod"
clearable
multiple
value-key="uid"
placeholder="请选择"
@visible-change="chgSource">
<el-option
v-for="item in sourceList"
:key="item.uid"
:label="item.sourceName"
:value="item">
</el-option>
</el-select>
好啦~ 今天就先叨叨到这里吧~
如果你也经常使用element-ui 可持续关注 Element UI 入坑小结
如果本文对你有所帮助，感谢点一颗小心心，您的支持是我继续创作的动力！
