element修改form的el-input寬度,el-select寬度的方法實現

自從用瞭element-ui,確實好用，該有的組件都有，但是組件間的樣式都固定好瞭，有時候像form表單這樣，頁面的input、select等寬度不一定會是一樣的，可能有些長，有些短，這時候改變這些控件的寬度就有點麻煩瞭。

看瞭網上的好多文章，都沒有找到解決方案，很多都說在el-input裡面加width,但是效果不好，簡單總結一下這個

例如我想要這種效果，把描述和郵箱都的寬度width設置長一點

在這裡插入圖片描述

首先在el-select裡面增加style=“width:500px”，發現沒有效果，為什麼呢，因為在elment裡面固定好瞭控件的樣式，el-input裡面增加style="width:500px"會有效果，但是我覺得更好的做法是利用css樣式優先級，覆蓋原來的element的css來處理。

在這裡插入圖片描述

我們調試一下頁面，看看是那個css樣式影響瞭寬度,可以看到.el-form–inline div.el-input固定為156px

在這裡插入圖片描述

4.利用css的樣式優先級，我們在當前的頁面再寫一個自定義的class,我們首先定義一個當前頁面的css，然後在這個頁面裡面重寫css覆蓋剛剛的頁面樣式，這樣就不會影響到別的頁面樣式，

1、定義一個當前頁面樣式user_info_page， 2、設置當前控件的樣式descClass，3、在style的descClass樣式裡面重寫這個el-select樣式的寬度width

在這裡插入圖片描述

可以看到這樣設置之後，el-input或者el-select的寬度就變長瞭

在這裡插入圖片描述

註：
1.style lang="less"才可以在一個css裡面再設置css樣式
2.這裡的width沒有用百分比，會帶來新的坑，屏幕小的，頁面可能會變形，百分比這個也可以（有空補上），但是可以把el-col的span設置大一點，優化佈局，使之減少變形的可能

到此這篇關於element修改form的el-input寬度,el-select寬度的方法實現的文章就介紹到這瞭,更多相關element修改 el-input寬度,el-select寬度內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！