el-form的label和表單自適應(yīng)填滿一行且靠左對齊方式
el-form的label和表單自適應(yīng)填滿一行且靠左對齊
如圖: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提供了一個參數(shù) label-width:
可以在form表單中設(shè)置label-width寬度(作為 Form 直接子元素的 form-item 會繼承該值),但問題來了,如果不確定標簽的長度,給固定值容易造成過長標簽的換行,導(dǎo)致頁面布局錯亂。
把label-width設(shè)置為auto
<el-form ref="form" :model="form" label-width="auto" size="small" > </el-form>
這樣label就會自適應(yīng)標簽的長度了,效果如下 ↓
注意:如果給固定值,則還可以設(shè)置label標簽的對齊方式 label-position="left"
下圖就是通過設(shè)置label-width=150px;label-position="left出來的效果,遇到標簽過長的字段名稱只能在單獨的el-form-item標簽中設(shè)置label-width
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue 雙向數(shù)據(jù)綁定的實現(xiàn)學習之監(jiān)聽器的實現(xiàn)方法
這篇文章主要介紹了vue 雙向數(shù)據(jù)綁定的實現(xiàn)學習之監(jiān)聽器的實現(xiàn)方法,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下2018-11-11詳解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-08Vue中常用的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-04Vue實現(xiàn)Hover功能(mouseover與mouseenter的區(qū)別及說明)
這篇文章主要介紹了Vue實現(xiàn)Hover功能(mouseover與mouseenter的區(qū)別及說明),具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-10-10