解決iview 的select下拉框選項錯位的問題

2021-08-15 07:22:56 字數 755 閱讀 3505

2018.04.11 官方發布了2.13.0版本,之前寫的**樣式全亂掉了~。小版本發布,為何不相容啊,難道是帶著bug上線

2018.04.10 很不幸,更新到官方2.12.0版本,下拉框彈出層又出問題了,transfer不管用了。

2018.03.11現在官方提供了解決方案:設定transfer屬性,利用 :transfer=」true」,將彈層放置於 body 內,在 tabs、帶有 fixed 的 table 列內使用時,建議新增此屬性,它將不受父級樣式影響,從而達到更好的效果。推薦官方方案,注意iview版本。

在使用iview的過程中,我遇到這樣乙個問題,在model中使用select下拉框元件。但是當彈出框超過一屏需要滾動時,select的下拉選項會出現錯位(下圖1為正常,圖2為滾動後,下拉選項錯位。)

圖1:圖2:

.ivu-modal

.ivu-select-dropdown

正是這個樣式影響了下拉框的定位,解決的方式是覆蓋作者的原來樣式。

但是,很不巧的是,作者加了乙個!important,改變了優先順序。

那麼,如何讓自己的樣式優先順序比他高呢,可以在自定義的樣式檔案裡加入這樣的樣式:

body

.ivu-modal

.ivu-select-dropdown

iview中select的使用

待完善 參考 label 區域 prop districtid v model step1form.districtid placeholder 選擇區域 on change mydistrict label in value true v for item in arealist value it...

iView之Select元件的優化

我們公司的元件庫是基於iview比較早的版本修改後的僅供公司內部使用的元件庫,因此在使用的過程中就會遇到一些問題。接下來本文會對比select元件在效能上做出的優化。我們先來回顧一下debounce函式的使用場景 在前端頁面我們會遇到一些頻繁觸發的事件 比如 滑鼠的移動mousemove事件 win...

解決iview中標籤報錯的方法

這時錯誤並不會訊息。2 在git bash中輸入yarn add d eslint eslint plugin vue,若沒有安裝yarn則需要先安裝,安裝可採用npm的安裝方法 3 在eslintrc.js中配置,如下 1 extends 2 consider switching to plugi...