Vue中設(shè)置el-select的高度不生效問題及解決方案
el-select是Element UI框架中的一個(gè)選擇器組件，它允許用戶從多個(gè)選項(xiàng)中選擇一個(gè)或多個(gè)項(xiàng)目。但這里確存在一個(gè)小坑，我們可以看到直接修改el-select的高度是無法生效的
<template>
<div id="login">
<el-select v-model="role">
<el-option label="管理員" value="admin"></el-option>
<el-option label="教師" value="teacher"></el-option>
<el-option label="學(xué)生" value="student"></el-option>
</el-select>
</div>
</template>
<style lang="scss" scoped>
.el-select{
height: 50px !important;
}
</style>
其實(shí)要想修改下拉框的高度，必需要修改內(nèi)部的css樣式
我們使用瀏覽器可以看到下拉框內(nèi)部有一個(gè)類el-select-wrapper，
Vue 2.x 提供的/deep/關(guān)鍵字穿透組件的作用域，以影響子組件的樣式
.el-select /deep/ .el-select__wrapper{
height: 50px;
}：Vue 2.6+ 到Vue 3 初期提供了全新的穿透樣式關(guān)鍵字::v-deep，修改樣式
::v-deep .el-select .el-select__wrapper{
height: 50px;
}在最新的 Vue 3 和構(gòu)建工具（如 Vite）中，::v-deep 的用法已經(jīng)被視為過時(shí)，推薦使用 :deep() 偽類來代替。
:deep(.el-select .el-select__wrapper){
height: 50px;
}至此el-select的高度修改成功
到此這篇關(guān)于解決Vue中設(shè)置el-select的高度不生效問題的文章就介紹到這了,更多相關(guān)vue el-select高度不生效內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
element多選表格中使用Switch開關(guān)的實(shí)現(xiàn)
當(dāng)在做后臺(tái)管理系統(tǒng)的時(shí)候，會(huì)用到用戶的狀態(tài)管理這個(gè)功能，本文主要介紹了element多選表格中使用Switch開關(guān)的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07
Vue3?使用Element?Plus表格單選帶checkbox功能
這篇文章主要介紹了Vue3?使用Element?Plus表格單選帶checkbox,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2023-11-11
vue?頂部消息橫向滾動(dòng)通知效果實(shí)現(xiàn)
系統(tǒng)頂部展示一個(gè)橫向滾動(dòng)的消息通知,就是消息內(nèi)容從右往左一直滾動(dòng),這篇文章主要介紹了vue頂部消息橫向滾動(dòng)通知,需要的朋友可以參考下2024-02-02
Vue?先初始化父組件再初始化子組件的方法(自定義父子組件mounted執(zhí)行順序)
這篇文章主要介紹了Vue?先初始化父組件再初始化子組件的方法（自定義父子組件mounted執(zhí)行順序）,本篇內(nèi)容內(nèi)容主要講述了,在使用?Konva?進(jìn)行開發(fā)過程中遇到的一些問題,需要的朋友可以參考下2024-07-07
這篇文章主要為大家介紹了Vue中request.js封裝及調(diào)用示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-09-09
Vue滑塊驗(yàn)證碼組件anji-captcha的使用案例詳解
滑塊驗(yàn)證是一種常見的人機(jī)識(shí)別方法，這篇文章主要介紹了Vue滑塊驗(yàn)證碼組件anji-captcha的使用,本文通過實(shí)例代碼圖文相結(jié)合給大家介紹的非常詳細(xì)，需要的朋友可以參考下2023-05-05
vue3中直接對(duì)reactive聲明的變量本身進(jìn)行賦值是無效的,本文主要介紹了vue3的reactive賦值問題解決,具有一定的參考價(jià)值,感興趣的可以了解一下2024-03-03
這篇文章主要介紹了淺談vue生命周期共有幾個(gè)階段？分別是什么？具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-08-08
這篇文章主要介紹了vant之van-list的使用及踩坑記錄，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
vue-cli+iview項(xiàng)目打包上線之后圖標(biāo)不顯示問題及解決方法
這篇文章主要介紹了解決vue-cli+iview項(xiàng)目打包上線之后圖標(biāo)不顯示問題,本文通過兩種方法給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-10-10