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

Posted on by

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>

2.局部覆蓋element-ui的默認樣式

解決辦法：在需要更改的組件裡新增一個style標簽【重點：不要加scoped】，然後直接獲取class設置樣式就可以，記住給class加上能限制范圍的父層選擇器，不然設置的樣式會全局生效

3.el-form 標簽綁定data中的form時候

請使用:model=“form” 而不是v-model=“form”，不然表單校驗會不起作用

原因就是el-form的具有自己封裝的model屬性，表示表單數據對象

以上為個人經驗，希望能給大傢一個參考，也希望大傢多多支持WalkonNet。

推薦閱讀：