Element UI 之 Select 選擇器

2021-10-07 11:47:45 字數 1267 閱讀 5423

在使用vue開發 spa pc 端 管理系統專案時 ,select 選擇器必不可少,今天來看看select 選擇器的基本使用及問題解決

基本使用就不多說了 ,看文件就可以:建議可以在官網上把 select 選擇器的實現效果 方法屬性都熟悉一下,那麼我要說的是,select 怎麼自定義他的樣式呢?多數情況下我們想修改element-ui 的樣式,往往是通過審查元素 找到對應的類 或者自定義乙個類進行樣式覆蓋或者修改,可是對於select 選擇框,真的有那麼幾分鐘我開始懷疑自己 ,怎麼設定都不好使。

那麼先檢查元素看看 select 選擇框的類是什麼,該怎麼定義

select 選擇器的自定義類 :popper-class="customselect"在類 customselect 中你可以自定義自己的樣式及功能,因為頁面中有很多地方會使用選擇框,所以要是用自定義類,要不然在index.html 中直接使用 el-select-dropdown ,及內部的其他類,會改變所有選擇器的樣式。

而我發現這個樣式的契機是頁面要改變 選擇器彈框的 z-index 顯示等級,因為pc端頁往往都是header + aside+main,main 區域中有搜尋下拉框,但當頁面滑動的時候,發現 輸入框已經隱藏到了header 下面 但是 選擇框卻還在header 上面,希望的是 選擇下來框可以一起滑動到header 下面。

原來的效果:

期望修改後的結果:可以隨著輸入框隱藏到header 下面

實現**,在index.html 的style 中定義:需要加important ,審查元素看 z-index 定義在行內元素中。

.customselect
以上記錄我對select選擇器自定義樣式的整懵的瞬間。不能單單修改header 的z-index 等級,因為會影響到其他的彈窗效果,比如messagebox 提示 ,還是本著修改當下,不影響其他的原則。

VUE實戰之引入ElementUI

本文在完成初始化的vue專案中引入elementui,vue專案的搭建過程請在目錄中跳轉相應頁面。npm i element ui s如圖所示,則說明安裝成功 安裝ui後需要引入,引入的方式多種多樣,下面介紹一種常用的引入方式。在main.js中加入下面三行 引入element元素 import e...

Vue 之 Element ui 按需匯入

在使用 vue 開發專案中,我們一般會選擇 elment ui 因為這個庫是基於 vue 並且有很多現成的元件供我們使用。我們可以根據官方文件直接在 main.js 中引入,但是這樣在最後專案開發完成後打包體積過大,建議是按需匯入,因為有些元件我們是用不到的。yarn add babel plugi...

linux 多路IO轉接伺服器之select

多路io轉接伺服器也叫做多工io伺服器。該類伺服器實現的主旨思想是,不再由應用程式自己監視客戶端連線,取而代之由核心替應用程式監視檔案。1.select能監聽的檔案描述符個數受限於fd setsize,一般為1024,單純改變程序開啟的檔案描述符個數並不能改變select監聽檔案個數 2.解決102...