element-ui?select下拉框位置錯亂如何解決

這篇文章主要介紹了element-ui select下拉框位置錯亂如何解決的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇element-ui select下拉框位置錯亂如何解決文章都會有所收獲，下面我們一起來看看吧。

element-ui select 下拉框位置錯亂

先上錯亂圖

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

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

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

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

官網鏈接：element的select組件

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

在我們的style標簽中寫

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

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

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

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

解決辦法：加上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屬性，表示表單數據對象

關于“element-ui select下拉框位置錯亂如何解決”這篇文章的內容就介紹到這里，感謝各位的閱讀！相信大家對“element-ui select下拉框位置錯亂如何解決”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業(yè)資訊頻道。