el select 元件下拉框被遮擋問題

2021-10-09 20:41:42 字數 569 閱讀 4239

發生這種問題的情況

1.當選擇框處於頁面邊緣

2.它的父級又沒有使用fixed 定位

3. 下拉框選項內容過長

如下圖:

解決辦法

1.element-ui 的el-select 的下拉框定位它會去判斷父級是否有fixed 定位如果有那麼下拉框也會是採用fixed 定位,這個時候回去判斷瀏覽器的邊框和 el-select 的位置去做定位從而不會超出瀏覽器。

2. 知道了上面的原理,解決辦法就是給父級加fixed 定位,我們只要給父級加 fixed 定位不需要給父級設定top|bottom|left|right 這些屬性。這樣下拉的寬就不會被遮擋了

注釋:(這樣可能會產生一些其他的問題,比如選擇框聯動很多級時候,因為螢幕大小產生了換行。但是因為父級加了fixed 定位換行時候不會把父級的父級高度撐大。這個時候可以利用window 的resize 事件進行對高度的監聽和改變。具體問題具體解決)

下拉框元件

createselect.js text 建立民族陣列 var arraynation new array 漢族 蒙古族 彝族 侗族 哈薩克族 畲族 納西族 仫佬族 仡佬族 怒族 保安族 鄂倫春族 回族 壯族 瑤族 傣族 高山族 景頗族 羌族 錫伯族 烏孜別克族 裕固族 赫哲族 藏族 布依族 白族 ...

複選下拉框元件

說明需求 做報表的時候,篩選條件中需要用到複選下拉框,首先說明 核取方塊 核取方塊 無法滿足我的需求,因為可選項有上百個,不可能都直接列在頁面上 下拉框 選擇 也無法滿足,因為不支援複選 在網上找了很久,找到乙個比較合適的核取方塊元件,效果如下 具體使用例項如下,假設jsp中有如下 牛人學歷 初中及...

下拉框公共元件

1 定義的下拉框公共元件 2 常量的定義,用去下拉框型別的區分 前端常量定義 const data type detail datatypedetail const province city area provincecityarea const province province const c...