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)部分顯示在下一行，可以通過設(shè)置前面的label寬度來進(jìn)行換行。
在具體的el-form-item中設(shè)置label-width，
也可以為整個(gè)表單el-form設(shè)置label-width，這樣整個(gè)頁面的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)文章
vue2和vue3的v-if與v-for優(yōu)先級(jí)對(duì)比學(xué)習(xí)
這篇文章主要介紹了vue2和vue3的v-if與v-for優(yōu)先級(jí)對(duì)比學(xué)習(xí)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-10-10
vue3-treeselect數(shù)據(jù)綁定失敗的解決方案
這篇文章主要介紹了vue3-treeselect數(shù)據(jù)綁定失敗的解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-05-05
Vue3中實(shí)現(xiàn)歌詞滾動(dòng)顯示效果
本文分享如何在Vue 3中實(shí)現(xiàn)一個(gè)簡(jiǎn)單的歌詞滾動(dòng)效果,我將從歌詞數(shù)據(jù)的處理開始,一步步介紹布局的搭建和事件的實(shí)現(xiàn),感興趣的朋友跟隨小編一起看看吧2024-02-02
echarts實(shí)現(xiàn)獲取datazoom的起始值(包括x軸和y軸)
這篇文章主要介紹了echarts實(shí)現(xiàn)獲取datazoom的起始值(包括x軸和y軸)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-07-07
vue+echarts實(shí)現(xiàn)動(dòng)態(tài)折線圖的方法與注意
這篇文章主要給大家介紹了關(guān)于vue+echarts實(shí)現(xiàn)動(dòng)態(tài)折線圖的方法與注意事項(xiàng)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-09-09
一篇文章帶你使用Typescript封裝一個(gè)Vue組件(簡(jiǎn)單易懂)
這篇文章主要介紹了使用Typescript封裝一個(gè)Vue組件，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06
這篇文章主要為大家詳細(xì)介紹了vue2與vue3中獲取模版引用ref的方法與區(qū)別,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-10-10
今天小編就為大家分享一篇vue-cli 3.x 修改dist路徑的方法，具有很好的參考價(jià)值。希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了Vue一個(gè)案例引發(fā)的遞歸組件的使用，本文主要給大家展示如何在項(xiàng)目中使用遞歸組件，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-11-11
這篇文章主要介紹了?vue3??mixin?混入使用方法，mixin?混入，提供了一種非常靈活的方式，來分發(fā)?vue?組件中的可復(fù)用功能，一個(gè)mixin?對(duì)象可以包含任意組件選項(xiàng)，當(dāng)組件使用?mixin?對(duì)象時(shí)，所有的?mixin?對(duì)象的選項(xiàng)將被混入組件本身的選項(xiàng)。,需要的朋友可以參考一下2021-11-11