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