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)文章
這篇文章主要介紹了vant中如何修改用戶的頭像，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
vite5+vue3+?import.meta.glob動(dòng)態(tài)導(dǎo)入vue組件圖文教程
import.meta.glob是Vite提供的一個(gè)特殊功能,它允許你在模塊范圍內(nèi)動(dòng)態(tài)地導(dǎo)入多個(gè)模塊,這篇文章主要給大家介紹了關(guān)于vite5+vue3+?import.meta.glob動(dòng)態(tài)導(dǎo)入vue組件的相關(guān)資料,需要的朋友可以參考下2024-07-07
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)登陸功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
Intellij IDEA搭建vue-cli項(xiàng)目的方法步驟
這篇文章主要介紹了Intellij IDEA搭建vue-cli項(xiàng)目的方法步驟,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-10-10
vue + echarts實(shí)現(xiàn)中國省份地圖點(diǎn)擊聯(lián)動(dòng)
這篇文章主要介紹了vue + echarts實(shí)現(xiàn)中國地圖省份點(diǎn)擊聯(lián)動(dòng),需要的朋友可以參考下2022-04-04
vue中transition動(dòng)畫使用(移動(dòng)端頁面切換左右滑動(dòng)效果)
這篇文章主要介紹了vue中transition動(dòng)畫使用(移動(dòng)端頁面切換左右滑動(dòng)效果),具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07
vue中如何實(shí)現(xiàn)拖拽調(diào)整順序功能
這篇文章主要介紹了vue中如何實(shí)現(xiàn)拖拽調(diào)整順序功能問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
Vue.js作為現(xiàn)代前端開發(fā)中的佼佼者,其組件系統(tǒng)是構(gòu)建高效、靈活和可擴(kuò)展用戶界面的關(guān)鍵,本文帶大家深度探索?Vue.js?組件的核心奧義,感興趣的小伙伴可以了解下2024-12-12
這篇文章主要介紹了vue中的自定義指令clickOutside，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05
vue是法語中視圖的意思，Vue.js是一個(gè)輕巧、高性能、可組件化的MVVM庫，同時(shí)擁有非常容易上手的API。這篇文章主要介紹了Vue.js快速入門實(shí)例教程的相關(guān)資料,需要的朋友可以參考下2016-10-10