element修改form的el-input寬度,el-select寬度的方法實現(xiàn)
自從用了element-ui,確實好用，該有的組件都有，但是組件間的樣式都固定好了，有時候像form表單這樣，頁面的input、select等寬度不一定會是一樣的，可能有些長，有些短，這時候改變這些控件的寬度就有點麻煩了。
看了網(wǎng)上的好多文章，都沒有找到解決方案，很多都說在el-input里面加width,但是效果不好，簡單總結(jié)一下這個
例如我想要這種效果，把描述和郵箱都的寬度width設(shè)置長一點
首先在el-select里面增加style=“width:500px”，發(fā)現(xiàn)沒有效果，為什么呢，因為在elment里面固定好了控件的樣式，el-input里面增加style="width:500px"會有效果，但是我覺得更好的做法是利用css樣式優(yōu)先級，覆蓋原來的element的css來處理。
我們調(diào)試一下頁面，看看是那個css樣式影響了寬度,可以看到.el-form–inline div.el-input固定為156px
4.利用css的樣式優(yōu)先級，我們在當(dāng)前的頁面再寫一個自定義的class,我們首先定義一個當(dāng)前頁面的css，然后在這個頁面里面重寫css覆蓋剛剛的頁面樣式，這樣就不會影響到別的頁面樣式，
具體做法
1、定義一個當(dāng)前頁面樣式user_info_page， 2、設(shè)置當(dāng)前控件的樣式descClass，3、在style的descClass樣式里面重寫這個el-select樣式的寬度width
可以看到這樣設(shè)置之后，el-input或者el-select的寬度就變長了
注：
1.style lang="less"才可以在一個css里面再設(shè)置css樣式
2.這里的width沒有用百分比，會帶來新的坑，屏幕小的，頁面可能會變形，百分比這個也可以（有空補(bǔ)上），但是可以把el-col的span設(shè)置大一點，優(yōu)化布局，使之減少變形的可能
到此這篇關(guān)于element修改form的el-input寬度,el-select寬度的方法實現(xiàn)的文章就介紹到這了,更多相關(guān)element修改 el-input寬度,el-select寬度內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
- VUE?Element修改el-input和el-select長度的具體步驟
- element?el-select下拉框選擇失效解決辦法
- 基于element-ui中el-select下拉框選項過多的優(yōu)化方案
- vue之elementUi的el-select同時獲取value和label的三種方式
- elementui?el-select?change事件傳參問題
- element中el-select的使用及說明
- elementUI動態(tài)表單?+?el-select?按要求禁用問題
- Vue element-UI el-select循環(huán)選中的問題
- 解決element-ui的el-select選擇器的@blur事件失效的坑
- vue+element開發(fā)使用el-select不能回顯的處理方案
- Element中el-select下拉框?qū)崿F(xiàn)選中圖標(biāo)并回顯圖標(biāo)
相關(guān)文章
在實際的Vue開發(fā)中,我們經(jīng)常需要在多個組件之間共享一些工具函數(shù)或類,比如格式化日期、處理字符串、操作數(shù)組等,本文將詳細(xì)介紹如何在Vue實例上掛載自己定義的工具類,并在項目中高效使用這些工具,需要的朋友可以參考下2024-09-09
vue-router后臺鑒權(quán)流程實現(xiàn)
本文主要介紹了vue-router后臺鑒權(quán)流程實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
這篇文章主要介紹了vue3 component is 不顯示的問題及解決,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
響應(yīng)式就是當(dāng)對象本身(對象的增刪值)或者對象屬性(重新賦值)發(fā)生變化時,將會運行一些函數(shù),最常見的就是render函數(shù),下面這篇文章主要給大家介紹了關(guān)于Vue3響應(yīng)式原理的相關(guān)資料,需要的朋友可以參考下2022-11-11
這篇文章主要介紹了Vue-Ant Design Vue-普通及自定義校驗實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
過濾器是一個通過輸入數(shù)據(jù)，能夠及時對數(shù)據(jù)進(jìn)行處理并返回一個數(shù)據(jù)結(jié)果的簡單函數(shù)。下面這篇文章主要給大家介紹了關(guān)于vue.js中過濾器使用的相關(guān)資料，需要的朋友可以參考借鑒，下面來看看詳細(xì)的介紹。2017-06-06
element-ui中如何給el-table的某一行或某一列加樣式
本文主要介紹了element-ui中怎么給el-table的某一行或某一列加樣式，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-01-01
Vue3?+?elementplus實現(xiàn)表單驗證+上傳圖片+?防止表單重復(fù)提交功能
這篇文章主要介紹了Vue3?+?elementplus?表單驗證+上傳圖片+?防止表單重復(fù)提交,本文給大家展示效果圖和完整代碼，代碼簡單易懂，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-10-10
這篇文章主要為大家詳細(xì)介紹了最基礎(chǔ)的vue.js雙向綁定操作，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-08-08
vue封裝全局彈窗警告組件this.$message.success問題
這篇文章主要介紹了vue封裝全局彈窗警告組件this.$message.success問題,具有很的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-09-09