el-form的label和表單自適應(yīng)填滿一行且靠左對(duì)齊方式
el-form的label和表單自適應(yīng)填滿一行且靠左對(duì)齊
如圖：label和content均向左靠齊，且填滿整行；
.el-form-item__label-wrap {
margin-left: 0px !important;
}
.el-form-item__label{
word-break: keep-all !important;
}
.el-form-item__content{
margin: 0 !important;
width: -webkit-fill-available;
}
.el-input.el-input--medium,.el-select.el-select--medium {
width: 100%;
}
.el-form-item.el-form-item--medium {
display: flex;
justify-content: start;
}word-break:keep-all;文字保持一行width:-webkit-fill-available;寬度自適應(yīng)；
element ui表單el-form的label自適應(yīng)寬度
在ElementUI官方文檔中el-form提供了一個(gè)參數(shù) label-width：
可以在form表單中設(shè)置label-width寬度（作為 Form 直接子元素的 form-item 會(huì)繼承該值），但問題來了，如果不確定標(biāo)簽的長度，給固定值容易造成過長標(biāo)簽的換行，導(dǎo)致頁面布局錯(cuò)亂。
把label-width設(shè)置為auto
<el-form ref="form" :model="form" label-width="auto" size="small" > </el-form>
這樣label就會(huì)自適應(yīng)標(biāo)簽的長度了，效果如下 ↓
注意：如果給固定值，則還可以設(shè)置label標(biāo)簽的對(duì)齊方式 label-position="left"
下圖就是通過設(shè)置label-width=150px;label-position="left出來的效果，遇到標(biāo)簽過長的字段名稱只能在單獨(dú)的el-form-item標(biāo)簽中設(shè)置label-width
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家介紹了vue-print-nb只打印一頁解決方法示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪<BR>2023-11-11
vue 雙向數(shù)據(jù)綁定的實(shí)現(xiàn)學(xué)習(xí)之監(jiān)聽器的實(shí)現(xiàn)方法
這篇文章主要介紹了vue 雙向數(shù)據(jù)綁定的實(shí)現(xiàn)學(xué)習(xí)之監(jiān)聽器的實(shí)現(xiàn)方法,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-11-11
Vue項(xiàng)目打包并部署nginx服務(wù)器的詳細(xì)步驟
vue項(xiàng)目開發(fā)好之后需要部署到服務(wù)器上進(jìn)行外網(wǎng)訪問,下面這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目打包并部署nginx服務(wù)器的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07
詳解Vue3?SFC?和?TSX?方式調(diào)用子組件中的函數(shù)
在使用?.vue?定義的組件中，setup?中提供了?defineExpose()?方法，該方法可以將組件內(nèi)部的方法暴露給父組件，這篇文章主要介紹了Vue3?SFC?和?TSX?方式調(diào)用子組件中的函數(shù),需要的朋友可以參考下2022-10-10
詳解如何配置vue-cli3.0的vue.config.js
這篇文章主要介紹了詳解如何配置vue-cli3.0的vue.config.js，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-08-08
Vue實(shí)現(xiàn)彈出框點(diǎn)擊空白頁彈框消失效果
這篇文章主要介紹了VUE實(shí)現(xiàn)彈出框點(diǎn)擊空白頁彈框消失,實(shí)現(xiàn)方法可以在Vue中實(shí)現(xiàn)彈出框然后通過點(diǎn)擊空白頁面來讓彈窗隱藏,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2023-12-12
這篇文章主要介紹了vue接通后端api以及部署到服務(wù)器操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-08-08
Vue中常用的rules校驗(yàn)規(guī)則的實(shí)現(xiàn)
在vue開發(fā)中,難免遇到各種表單校驗(yàn),本文主要介紹了Vue中常用的rules校驗(yàn)規(guī)則的實(shí)現(xiàn),具有一定的參考價(jià)值,感興趣的可以了解一下2023-10-10
如何基于vue-cli3.0構(gòu)建功能完善的移動(dòng)端架子
這篇文章主要介紹了基于vue-cli3.0構(gòu)建功能完善的移動(dòng)端架子，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
Vue實(shí)現(xiàn)Hover功能(mouseover與mouseenter的區(qū)別及說明)
這篇文章主要介紹了Vue實(shí)現(xiàn)Hover功能(mouseover與mouseenter的區(qū)別及說明)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10