element修改form的el-input寬度,el-select寬度的方法實(shí)現(xiàn)
自從用了element-ui,確實(shí)好用,該有的組件都有,但是組件間的樣式都固定好了,有時候像form表單這樣,頁面的input、select等寬度不一定會是一樣的,可能有些長,有些短,這時候改變這些控件的寬度就有點(diǎn)麻煩了。
看了網(wǎng)上的好多文章,都沒有找到解決方案,很多都說在el-input里面加width,但是效果不好,簡單總結(jié)一下這個
例如我想要這種效果,把描述和郵箱都的寬度width設(shè)置長一點(diǎn)
首先在el-select里面增加style=“width:500px”,發(fā)現(xiàn)沒有效果,為什么呢,因?yàn)樵趀lment里面固定好了控件的樣式,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è)置大一點(diǎn),優(yōu)化布局,使之減少變形的可能
到此這篇關(guān)于element修改form的el-input寬度,el-select寬度的方法實(shí)現(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下拉框選項(xiàng)過多的優(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)文章
vue3使用vuex實(shí)現(xiàn)頁面實(shí)時更新數(shù)據(jù)實(shí)例教程(setup)
在前端開發(fā)中往往會遇到頁面需要實(shí)時刷新數(shù)據(jù)的情況,給用戶最新的數(shù)據(jù)展示,這篇文章主要給大家介紹了關(guān)于vue3使用vuex實(shí)現(xiàn)頁面實(shí)時更新數(shù)據(jù)(setup)的相關(guān)資料,需要的朋友可以參考下2022-09-09Vue 2.5 Level E 發(fā)布了: 新功能特性一覽
很高興Vue 2.5 Level E 發(fā)布了。在這篇文章中,我們將重點(diǎn)介紹一些更重要的的變化:更好的 TypeScript 集成,更好的錯誤處理,更好地支持單文件組件中的函數(shù)式組件以及與環(huán)境無關(guān)的服務(wù)端渲染2017-10-10VUE開發(fā)分布式醫(yī)療掛號系統(tǒng)的醫(yī)院設(shè)置頁面步驟
這篇文章主要為大家介紹了VUE開發(fā)分布式醫(yī)療掛號系統(tǒng)的醫(yī)院設(shè)置頁面步驟,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-04-04vue2.0 移動端實(shí)現(xiàn)下拉刷新和上拉加載更多的示例
本篇文章主要介紹vue2.0 移動端實(shí)現(xiàn)下拉刷新和上拉加載更多的示例,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-04-04在vscode中統(tǒng)一vue編碼風(fēng)格的方法
本篇文章主要介紹了在vscode中統(tǒng)一vue編碼風(fēng)格的方法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-02-02