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)簽的長度，給固定值容易造成過長標(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)文章

基于Vue3實(shí)現(xià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
Vue引入echarts方法與使用介紹
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)用改造
這篇文章主要介紹了詳解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ū)別和使用場景,需要的朋友可以參考下
2024-11-11
vue3?動(dòng)態(tài)綁定背景圖片方法示例
這篇文章主要為大家介紹了vue3動(dòng)態(tài)綁定背景圖片實(shí)例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-10-10
解決vue3使用element-ui的具體操作
elmentui是一款為vue設(shè)計(jì)的桌面組件庫,下面這篇文章主要給大家介紹了關(guān)于解決vue3使用element-ui的具體操作,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-08-08
淺析vue3的setup的使用和原理
setup是Vue3中引入的一個(gè)新的組件選項(xiàng)，是Vue3中函數(shù)式組件的核心部分，它提供了一種新的方式來編寫組件邏輯，下面就來和大家講講它的使用和原理
2023-08-08
Vue項(xiàng)目打包部署總結(jié)篇
這篇文章主要介紹了Vue項(xiàng)目打包部署總結(jié)篇,關(guān)于Vue項(xiàng)目發(fā)布的相關(guān)問題就先總結(jié)這么多,幾乎在每一步都踩過坑才有所體會(huì),有問題歡迎各位同學(xué)一起探討,需要的朋友可以參考下
2024-08-08