關(guān)于element-ui?select?下拉框位置錯亂問題解決

更新時間：2022年09月05日 09:47:32 作者：Hello_yihao

這篇文章主要介紹了關(guān)于element-ui?select?下拉框位置錯亂問題解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

element-ui select 下拉框位置錯亂

~~今天寫bug時~~ ，突然發(fā)現(xiàn)個element下拉框的樣式出現(xiàn)錯亂，折騰了大半個小時總算搞定了，這里分享下。

先上錯亂圖

看上圖，正常情況下下拉選項應(yīng)該貼著select框的，而此時兩者相隔甚遠(yuǎn)

這個時候只能檢查下元素了

檢查元素可以看到，el-select默認(rèn)插入到body中的，現(xiàn)在出現(xiàn)這個bug后我們就不能再插入到body中了

官網(wǎng)有個屬性可以設(shè)置成不插入到body中，先在代碼中用起來

官網(wǎng)鏈接：element的select組件

那這個時候還不能完全解決問題，我們需要重置下select的默認(rèn)樣式

在我們的style標(biāo)簽中寫

只修改了兩處地方就解決了這個bug，總體來說應(yīng)該還是頁面布局有點問題，但這個祖?zhèn)鞔a已經(jīng)不允許我大刀闊斧了。。。

element-ui使用時的一些坑點總結(jié)

1.el-select 下拉框綁定值為對象時選中值顯示錯亂

如下圖，所有下拉選項都是選中狀態(tài)而且不管怎么選，下拉框顯示的值一直是最后一個選項

解決辦法：加上value-key屬性 官網(wǎng)也有介紹，當(dāng)綁定值是對象類型是必填

代碼如下，其中value-key屬性的值為數(shù)據(jù)源數(shù)組元素中的唯一鍵。

例如下面的id，如果其他字段的值也是唯一確定的，如reserve1，那么value-key的值也可以是reserve1

<el-select v-model="goodsForm.currency" value-key="id" placeholder="請選擇"
                               @change="changeCurrencySymbol">
                        <el-option
                                v-for="item in currencyList"
                                :key="item.id"
                                :label="item.reserve1"
                                :value="item">
                        </el-option>
                    </el-select>