關於element-ui select 下拉框位置錯亂問題解決

2022-09-05 14:01:11

element-ui select 下拉框位置錯亂

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

先上錯亂圖

看上圖，正常情況下下拉選項應該貼著select框的，而此時兩者相隔甚遠

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

檢查元素可以看到，el-select預設插入到body中的，現在出現這個bug後我們就不能再插入到body中了

官網有個屬性可以設定成不插入到body中，先在程式碼中用起來

官網連結：element的select元件

那這個時候還不能完全解決問題，我們需要重置下select的預設樣式

在我們的style標籤中寫

只修改了兩處地方就解決了這個bug，總體來說應該還是頁面佈局有點問題，但這個祖傳程式碼已經不允許我大刀闊斧了。。。

element-ui使用時的一些坑點總結

1.el-select 下拉框繫結值為物件時選中值顯示錯亂

如下圖，所有下拉選項都是選中狀態而且不管怎麼選，下拉框顯示的值一直是最後一個選項

解決辦法：加上value-key屬性 官網也有介紹，當繫結值是物件型別是必填

程式碼如下，其中value-key屬性的值為資料來源陣列元素中的唯一鍵。

例如下面的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>