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

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

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

element-ui select 下拉框位置錯(cuò)亂

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

先上錯(cuò)亂圖

錯(cuò)亂

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

這個(gè)時(shí)候只能檢查下元素了

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

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

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

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

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

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

element-ui使用時(shí)的一些坑點(diǎn)總結(jié)

1.el-select 下拉框綁定值為對(duì)象時(shí)選中值顯示錯(cuò)亂

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

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

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

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

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