el-form的label和表單自適應(yīng)填滿一行且靠左對(duì)齊方式
更新時(shí)間：2022年10月08日 10:43:08 作者：RAY_CHEN.
這篇文章主要介紹了el-form的label和表單自適應(yīng)填滿一行且靠左對(duì)齊方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
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)簽的長(zhǎng)度，給固定值容易造成過長(zhǎng)標(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)簽的長(zhǎng)度了，效果如下 ↓
注意：如果給固定值，則還可以設(shè)置label標(biāo)簽的對(duì)齊方式 label-position="left"
下圖就是通過設(shè)置label-width=150px;label-position="left出來的效果，遇到標(biāo)簽過長(zhǎng)的字段名稱只能在單獨(dú)的el-form-item標(biāo)簽中設(shè)置label-width
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
在現(xiàn)代前端開發(fā)中,拖拽功能是增強(qiáng)用戶體驗(yàn)的重要手段之一,本文將詳細(xì)介紹如何在Vue3中封裝一個(gè)拖拽指令并通過實(shí)戰(zhàn)例子演示其實(shí)現(xiàn)過程,希望對(duì)大家有所幫助2024-11-11
vue2實(shí)現(xiàn)數(shù)據(jù)請(qǐng)求顯示loading圖
這篇文章主要為大家詳細(xì)介紹了vue2實(shí)現(xiàn)數(shù)據(jù)請(qǐng)求顯示loading圖，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-11-11
Echarts，它是一個(gè)與框架無關(guān)的?JS?圖表庫，但是它基于Js，這樣很多框架都能使用它，例如Vue，估計(jì)IONIC也能用，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
vuejs前后端數(shù)據(jù)交互之從后端請(qǐng)求數(shù)據(jù)的實(shí)例
今天小編就為大家分享一篇vuejs前后端數(shù)據(jù)交互之從后端請(qǐng)求數(shù)據(jù)的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-08-08
這篇文章主要介紹了詳解vue-cli3多頁應(yīng)用改造，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-06-06
Vue3.0使用ref和reactive來創(chuàng)建響應(yīng)式數(shù)據(jù)
ref?和?reactive?是?Composition?API?中用來創(chuàng)建響應(yīng)式數(shù)據(jù)的兩個(gè)核心函數(shù),在本篇文章中,我們將詳細(xì)講解如何使用?ref?和?reactive?來創(chuàng)建響應(yīng)式數(shù)據(jù),并展示它們之間的區(qū)別和使用場(chǎng)景,需要的朋友可以參考下2024-11-11
這篇文章主要為大家介紹了vue3動(dòng)態(tài)綁定背景圖片實(shí)例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-10-10
elmentui是一款為vue設(shè)計(jì)的桌面組件庫,下面這篇文章主要給大家介紹了關(guān)于解決vue3使用element-ui的具體操作,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-08-08
setup是Vue3中引入的一個(gè)新的組件選項(xiàng)，是Vue3中函數(shù)式組件的核心部分，它提供了一種新的方式來編寫組件邏輯，下面就來和大家講講它的使用和原理2023-08-08
這篇文章主要介紹了Vue項(xiàng)目打包部署總結(jié)篇,關(guān)于Vue項(xiàng)目發(fā)布的相關(guān)問題就先總結(jié)這么多,幾乎在每一步都踩過坑才有所體會(huì),有問題歡迎各位同學(xué)一起探討,需要的朋友可以參考下2024-08-08