昨天下班時(shí)leader說(shuō)線上有個(gè)bug母怜，作者不在讓我留下幫忙改一手台丛，雖然從發(fā)現(xiàn)問(wèn)題到解決也就10分鐘的事帖汞，但我還是在這里記錄一下戴而，以免更多的前端同胞入坑
這個(gè)項(xiàng)目里的 <el-select> 用到了好多屬性：
-
filterable可搜索 -
remote可遠(yuǎn)程搜索 -
remote-method遠(yuǎn)程搜索的方法 -
clearable可清空選項(xiàng) -
multiple多選 -
value-key作為 value 唯一標(biāo)識(shí)的鍵名，綁定值為對(duì)象類型時(shí)必填 -
visible-change下拉框出現(xiàn)/隱藏時(shí)觸發(fā)
出錯(cuò)的現(xiàn)象是這樣的：
搜索ccc并選中翩蘸，結(jié)果回顯被選中的名字是aaa所意，下拉選中的是ccc？催首！
刪改了幾個(gè)屬性發(fā)現(xiàn)：點(diǎn)擊select下拉框獲取全部數(shù)據(jù)扶踊，多選其中幾項(xiàng)，ok沒(méi)問(wèn)題郎任；
按關(guān)鍵字搜索快速選擇所需數(shù)據(jù)秧耗，單選沒(méi)問(wèn)題；
為什么會(huì)這樣呢尺锚，一切的一切都是因?yàn)樵?
vue 中 v-for 的 key 不要用 index！Ｏ场瘫辩！，因?yàn)槿绻麛?shù)據(jù)項(xiàng)的順序被改變坛悉，Vue 將不會(huì)移動(dòng) DOM 元素來(lái)匹配數(shù)據(jù)項(xiàng)的順序杭朱， 而是簡(jiǎn)單復(fù)用此處每個(gè)元素。
我搜索了ccc吹散，當(dāng)時(shí)的下拉選項(xiàng)只剩ccc弧械，它當(dāng)時(shí)的index是0，由于多選的需求空民，我還要繼續(xù)選其他選項(xiàng)刃唐，所以當(dāng)下拉選項(xiàng)為全集時(shí)羞迷，全集中index為0的項(xiàng)就被選中了。這也說(shuō)明了為什么只是多選時(shí)沒(méi)有問(wèn)題画饥、單選搜索時(shí)也沒(méi)有問(wèn)題衔瓮，因?yàn)橹挥性诙噙x搜索時(shí)下拉的全量才會(huì)來(lái)回變換。
６陡省Ｈ劝啊！這是錯(cuò)誤代碼不要學(xué)Ｏ纬埂＾背琛！
正確的寫(xiě)法是用 key 綁定唯一標(biāo)識(shí)的鍵名
<el-select
v-model="form.source"
filterable
remote
:remote-method="remoteMethod"
clearable
multiple
value-key="uid"
placeholder="請(qǐng)選擇"
@visible-change="chgSource">
<el-option
v-for="item in sourceList"
:key="item.uid"
:label="item.sourceName"
:value="item">
</el-option>
</el-select>
好啦~ 今天就先叨叨到這里吧~
如果你也經(jīng)常使用element-ui 可持續(xù)關(guān)注 Element UI 入坑小結(jié)
如果本文對(duì)你有所幫助艰额，感謝點(diǎn)一顆小心心澄港，您的支持是我繼續(xù)創(chuàng)作的動(dòng)力！
