element ui中表單el-form的label如何設(shè)置寬度
更新時(shí)間：2022年10月08日 14:14:47 作者：凡人繁星
這篇文章主要介紹了element ui中表單el-form的label如何設(shè)置寬度，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
element ui中表單el-form的label設(shè)置寬度
測(cè)試要求把輸入框前面的名字帶括號(hào)的把括號(hào)部分顯示在下一行，可以通過(guò)設(shè)置前面的label寬度來(lái)進(jìn)行換行。
在具體的el-form-item中設(shè)置label-width，
也可以為整個(gè)表單el-form設(shè)置label-width，這樣整個(gè)頁(yè)面的label寬度統(tǒng)一。
例：
<el-form label-width="100px">
在el-form-item 重置label寬度
//在el-form 設(shè)置 label寬度 label-width=“120px”
<el-form :model="ruleFormOne" :rules="rules" ref="ruleFormOne" label-width="120px"> ? ? ? ? ? <el-form-item label="活動(dòng)標(biāo)題：" prop="name"> ? ? ? ? ? ? ? ? ? ? <el-input ? ? ? ? ? ? ? ? ? ? ? ? :disabled="isDisabledPart" ? ? ? ? ? ? ? ? ? ? ? ? class="p-inputCount" ? ? ? ? ? ? ? ? ? ? ? ? type="text" ? ? ? ? ? ? ? ? ? ? ? ? v-model="ruleFormOne.name" ? ? ? ? ? ? ? ? ? ? ? ? placeholder="請(qǐng)輸入標(biāo)題，限16個(gè)字" ? ? ? ? ? ? ? ? ? ? ? ? maxlength = "16" ? ? ? ? ? ? ? ? ? ? ? ? style="width: 300px" ? ? ? ? ? ? ? ? ? ? ? ? @input = "formatName" ? ? ? ? ? ? ? ? ? ? ? ? show-word-limit ? ? ? ? ? ? ? ? ? ? ? ? clearable ? ? ? ? ? ? ? ? ? ? ? ? > ? ? ? ? ? ? ? ? ? ? </el-input> ? ? ? ? ? ?</el-form-item> ??
//在el-form-item 重置label寬度，label-width=“50px”
? ? ? ? ? ?<el-form-item label="" label-width="50px" >? ? ? ? ? ? ? 活動(dòng)期間內(nèi)，會(huì)員每擁有 ? ? ? ? ? ? ? <span class="inline-block"> ? ? ? ? ? ? ? ? <el-form-item? ? ? ? ? ? ? ? ? ? ? prop="items[0].eventtimes" > ? ? ? ? ? ? ? ? ? ?<el-input ? ? ? ? ? ? ? ? ? ? ? ? v-model="ruleFormOne.items[0].eventtimes" ? ? ? ? ? ? ? ? ? ? ? ? :disabled="true" ? ? ? ? ? ? ? ? ? ? ? ? style="width: 60px" ? ? ? ? ? ? ? ? ? ? ? ? class="input-width" ? ? ? ? ? ? ? ? ? ? ? ? clearable> ? ? ? ? ? ? ? ? ? ? </el-input> ? ? ? ? ? ? ? ? ? </el-form-item> ? ? ? ? ? ? ? ? </span> ?</el-form> ??
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue $attrs & inheritAttr實(shí)現(xiàn)button禁用效果案例
這篇文章主要介紹了Vue $attrs & inheritAttr實(shí)現(xiàn)button禁用效果案例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-12-12
el-table渲染慢卡頓問(wèn)題最優(yōu)解決方案
本文主要介紹了el-table渲染慢卡頓問(wèn)題最優(yōu)解決方案，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
vue實(shí)現(xiàn)錄音功能js-audio-recorder帶波浪圖效果的示例
這篇文章主要介紹了vue實(shí)現(xiàn)錄音功能js-audio-recorder帶波浪圖效果,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-08-08
vue項(xiàng)目中axios請(qǐng)求網(wǎng)絡(luò)接口封裝的示例代碼
這篇文章主要介紹了vue項(xiàng)目中axios請(qǐng)求網(wǎng)絡(luò)接口封裝的示例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-12-12
Vue3前端生成隨機(jī)id(生成?UUID)實(shí)際運(yùn)用
前端在做增刪改查時(shí)通常會(huì)使??個(gè)唯?數(shù)值做為數(shù)據(jù)的key值,下面這篇文章主要給大家介紹了關(guān)于Vue3前端生成隨機(jī)id(生成?UUID)的相關(guān)資料,文中給出了詳細(xì)的代碼示例,需要的朋友可以參考下2024-04-04
vue+element UI實(shí)現(xiàn)樹(shù)形表格帶復(fù)選框的示例代碼
這篇文章主要介紹了vue+element UI實(shí)現(xiàn)樹(shù)形表格帶復(fù)選框的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
vue的過(guò)濾器通常用在一些常見(jiàn)的文本格式化，過(guò)濾器可以用在兩個(gè)地方：雙花括號(hào)插值和 v-bind 表達(dá)式。本文給大家介紹了web前端vue filter 過(guò)濾器的相關(guān)知識(shí)，感興趣的朋友一起看看吧2018-01-01
vue如何使用mapbox對(duì)當(dāng)前行政區(qū)劃進(jìn)行反選遮罩
這篇文章主要介紹了vue如何使用mapbox對(duì)當(dāng)前行政區(qū)劃進(jìn)行反選遮罩問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
vue項(xiàng)目實(shí)現(xiàn)左滑刪除功能(完整代碼)
最近在開(kāi)發(fā)移動(dòng)端項(xiàng)目，通過(guò)向左滑動(dòng)出現(xiàn)刪除按鈕，點(diǎn)擊即可刪除，怎么實(shí)現(xiàn)這個(gè)功能呢，接下來(lái)小編給大家?guī)?lái)實(shí)例代碼幫助大家學(xué)習(xí)vue項(xiàng)目實(shí)現(xiàn)左滑刪除功能，感興趣的朋友跟隨小編一起看看吧2021-05-05
使用vant-picker實(shí)現(xiàn)自定義內(nèi)容,根據(jù)內(nèi)容添加圖標(biāo)
這篇文章主要介紹了使用vant-picker實(shí)現(xiàn)自定義內(nèi)容，根據(jù)內(nèi)容添加圖標(biāo)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12