亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

element修改form的el-input寬度,el-select寬度的方法實(shí)現(xiàn)

 更新時(shí)間：2022年02月17日 10:57:22   作者：新林。  
有時(shí)候像form表單這樣，頁面的input、select等寬度不一定會(huì)是一樣的，可能有些長(zhǎng)，有些短，本文就介紹了如何element修改form的el-input寬度,el-select寬度的方法實(shí)現(xiàn)，感興趣的可以了解一下

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

看了網(wǎng)上的好多文章，都沒有找到解決方案，很多都說在el-input里面加width,但是效果不好，簡(jiǎn)單總結(jié)一下這個(gè)

例如我想要這種效果，把描述和郵箱都的寬度width設(shè)置長(zhǎng)一點(diǎn)

在這里插入圖片描述

首先在el-select里面增加style=“width:500px”，發(fā)現(xiàn)沒有效果，為什么呢，因?yàn)樵趀lment里面固定好了控件的樣式，el-input里面增加style="width:500px"會(huì)有效果，但是我覺得更好的做法是利用css樣式優(yōu)先級(jí)，覆蓋原來的element的css來處理。

在這里插入圖片描述

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

在這里插入圖片描述

4.利用css的樣式優(yōu)先級(jí)，我們?cè)诋?dāng)前的頁面再寫一個(gè)自定義的class,我們首先定義一個(gè)當(dāng)前頁面的css，然后在這個(gè)頁面里面重寫css覆蓋剛剛的頁面樣式，這樣就不會(huì)影響到別的頁面樣式，

具體做法

1、定義一個(gè)當(dāng)前頁面樣式user_info_page， 2、設(shè)置當(dāng)前控件的樣式descClass，3、在style的descClass樣式里面重寫這個(gè)el-select樣式的寬度width

在這里插入圖片描述

在這里插入圖片描述

可以看到這樣設(shè)置之后，el-input或者el-select的寬度就變長(zhǎng)了

在這里插入圖片描述

注：
1.style lang="less"才可以在一個(gè)css里面再設(shè)置css樣式
2.這里的width沒有用百分比，會(huì)帶來新的坑，屏幕小的，頁面可能會(huì)變形，百分比這個(gè)也可以（有空補(bǔ)上），但是可以把el-col的span設(shè)置大一點(diǎn)，優(yōu)化布局，使之減少變形的可能

到此這篇關(guān)于element修改form的el-input寬度,el-select寬度的方法實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)element修改 el-input寬度,el-select寬度內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！ 

相關(guān)文章

最新評(píng)論