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