Vue中設(shè)置el-select的高度不生效問題及解決方案
更新時間：2025年01月03日 10:45:06 作者：java_學(xué)習(xí)愛好者
文章介紹了如何使用ElementUI框架中的el-select組件,并解決設(shè)置其高度不生效的問題,在Vue2.x中,使用/deep/關(guān)鍵字可以穿透組件作用域修改樣式；在Vue2.6+到Vue3初期,推薦使用::v-deep關(guān)鍵字；在最新的Vue3和構(gòu)建工具中,推薦使用:deep()偽類來代替::v-deep
el-select是Element UI框架中的一個選擇器組件，它允許用戶從多個選項中選擇一個或多個項目。但這里確存在一個小坑，我們可以看到直接修改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>
其實要想修改下拉框的高度，必需要修改內(nèi)部的css樣式
我們使用瀏覽器可以看到下拉框內(nèi)部有一個類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)被視為過時，推薦使用 :deep() 偽類來代替。
:deep(.el-select .el-select__wrapper){
height: 50px;
}至此el-select的高度修改成功
到此這篇關(guān)于解決Vue中設(shè)置el-select的高度不生效問題的文章就介紹到這了,更多相關(guān)vue el-select高度不生效內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了vant中如何修改用戶的頭像，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
vite5+vue3+?import.meta.glob動態(tài)導(dǎo)入vue組件圖文教程
import.meta.glob是Vite提供的一個特殊功能,它允許你在模塊范圍內(nèi)動態(tài)地導(dǎo)入多個模塊,這篇文章主要給大家介紹了關(guān)于vite5+vue3+?import.meta.glob動態(tài)導(dǎo)入vue組件的相關(guān)資料,需要的朋友可以參考下2024-07-07
這篇文章主要為大家詳細介紹了vue實現(xiàn)登陸功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章主要介紹了Intellij IDEA搭建vue-cli項目的方法步驟,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-10-10
vue + echarts實現(xiàn)中國省份地圖點擊聯(lián)動
這篇文章主要介紹了vue + echarts實現(xiàn)中國地圖省份點擊聯(lián)動,需要的朋友可以參考下2022-04-04
vue中transition動畫使用(移動端頁面切換左右滑動效果)
這篇文章主要介紹了vue中transition動畫使用(移動端頁面切換左右滑動效果),具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07
這篇文章主要介紹了vue中如何實現(xiàn)拖拽調(diào)整順序功能問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
Vue.js作為現(xiàn)代前端開發(fā)中的佼佼者,其組件系統(tǒng)是構(gòu)建高效、靈活和可擴展用戶界面的關(guān)鍵,本文帶大家深度探索?Vue.js?組件的核心奧義,感興趣的小伙伴可以了解下2024-12-12
這篇文章主要介紹了vue中的自定義指令clickOutside，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
vue是法語中視圖的意思，Vue.js是一個輕巧、高性能、可組件化的MVVM庫，同時擁有非常容易上手的API。這篇文章主要介紹了Vue.js快速入門實例教程的相關(guān)資料,需要的朋友可以參考下2016-10-10