element表單el-form的label自適應寬度的實現

在ElementUI官方文檔中el-form提供瞭一個參數 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

到此這篇關於element表單el-form的label自適應寬度的實現的文章就介紹到這瞭,更多相關element el-form label自適應寬度內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！