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提供了一個(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)簽的對齊方式 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 雙向數(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-11Vue項(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-08Vue實(shí)現(xiàn)彈出框點(diǎn)擊空白頁彈框消失效果
這篇文章主要介紹了VUE實(shí)現(xiàn)彈出框點(diǎn)擊空白頁彈框消失,實(shí)現(xiàn)方法可以在Vue中實(shí)現(xiàn)彈出框然后通過點(diǎn)擊空白頁面來讓彈窗隱藏,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2023-12-12Vue中常用的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ì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04Vue實(shí)現(xiàn)Hover功能(mouseover與mouseenter的區(qū)別及說明)
這篇文章主要介紹了Vue實(shí)現(xiàn)Hover功能(mouseover與mouseenter的區(qū)別及說明),具有很好的參考價(jià)值,希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-10-10