element表單el-form的label自適應(yīng)寬度的實現(xiàn)
更新時間：2022年08月12日 11:49:34 作者：ppandpp
本文主要介紹了element表單el-form的label自適應(yīng)寬度的實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
在ElementUI官方文檔中el-form提供了一個參數(shù) label-width：
可以在form表單中設(shè)置label-width寬度（作為 Form 直接子元素的 form-item 會繼承該值），但問題來了，如果不確定標(biāo)簽的長度，給固定值容易造成過長標(biāo)簽的換行，導(dǎo)致頁面布局錯亂。
所以把label-width設(shè)置為auto
<el-form ref="form" :model="form" label-width="auto" size="small" > </el-form>
這樣label就會自適應(yīng)標(biāo)簽的長度了，效果如下 ↓
注意：如果給固定值，則還可以設(shè)置label標(biāo)簽的對齊方式 label-position="left"
下圖就是通過設(shè)置label-width=150px;label-position="left出來的效果，遇到標(biāo)簽過長的字段名稱只能在單獨的el-form-item標(biāo)簽中設(shè)置label-width
到此這篇關(guān)于element表單el-form的label自適應(yīng)寬度的實現(xiàn)的文章就介紹到這了,更多相關(guān)element el-form label自適應(yīng)寬度內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue項目通過vue-i18n實現(xiàn)國際化方案(推薦)
這篇文章主要介紹了Vue項目通過vue-i18n實現(xiàn)國際化方案,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-12-12
Vue請求java服務(wù)端并返回數(shù)據(jù)代碼實例
這篇文章主要介紹了Vue請求java服務(wù)端并返回數(shù)據(jù)代碼實例,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-11-11
這篇文章主要介紹了nuxt+axios解決前后端分離SSR的示例代碼,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
過濾器(Filters)是 vue 為開發(fā)者提供的功能，常用于文本的格式化，這篇文章主要介紹了如何在Vue中定義和調(diào)用過濾器,需要的朋友可以參考下2023-09-09
市面上大多數(shù)關(guān)于Vue.js自定義指令的文章都在講語法,很少講實際的應(yīng)用場景和用例,下面這篇文章主要給大家介紹了關(guān)于vue自定義封裝指令以及實際使用的相關(guān)資料,需要的朋友可以參考下2022-01-01
vue如何使用moment處理時間戳轉(zhuǎn)換成日期或時間格式
這篇文章主要給大家介紹了關(guān)于vue如何使用moment處理時間戳轉(zhuǎn)換成日期或時間格式的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家學(xué)習(xí)或者vue具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2022-03-03
這篇文章主要介紹了vue中的依賴注入provide和inject簡單介紹,provide 選項允許我們指定我們想要提供給后代組件的數(shù)據(jù)/方法，本文通過組價刷新的案列給大家詳細(xì)講解，需要的朋友可以參考下2022-11-11
vue實現(xiàn)點擊關(guān)注后及時更新列表功能
這篇文章主要介紹了vue實現(xiàn)點擊關(guān)注后及時更新列表功能，本文通過實例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價值，需要的朋友可以參考下2018-06-06
這篇文章主要介紹了Vue中如何引用公共方法和公共組件問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
這篇文章主要為大家介紹了vue封裝動態(tài)表格方式示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08