element表單el-form的label自適應寬度的實現
更新時間：2022年08月12日 11:49:34 作者：ppandpp
本文主要介紹了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自適應寬度內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了Vue項目通過vue-i18n實現國際化方案,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-12-12
這篇文章主要介紹了Vue請求java服務端并返回數據代碼實例,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-11-11
這篇文章主要介紹了nuxt+axios解決前后端分離SSR的示例代碼,小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
過濾器(Filters)是 vue 為開發(fā)者提供的功能，常用于文本的格式化，這篇文章主要介紹了如何在Vue中定義和調用過濾器,需要的朋友可以參考下2023-09-09
市面上大多數關于Vue.js自定義指令的文章都在講語法,很少講實際的應用場景和用例,下面這篇文章主要給大家介紹了關于vue自定義封裝指令以及實際使用的相關資料,需要的朋友可以參考下2022-01-01
這篇文章主要給大家介紹了關于vue如何使用moment處理時間戳轉換成日期或時間格式的相關資料,文中通過示例代碼介紹的非常詳細,對大家學習或者vue具有一定的參考學習價值,需要的朋友可以參考下2022-03-03
這篇文章主要介紹了vue中的依賴注入provide和inject簡單介紹,provide 選項允許我們指定我們想要提供給后代組件的數據/方法，本文通過組價刷新的案列給大家詳細講解，需要的朋友可以參考下2022-11-11
這篇文章主要介紹了vue實現點擊關注后及時更新列表功能，本文通過實例代碼給大家介紹的非常詳細,具有一定的參考借鑒價值，需要的朋友可以參考下2018-06-06
這篇文章主要介紹了Vue中如何引用公共方法和公共組件問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
這篇文章主要為大家介紹了vue封裝動態(tài)表格方式示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08