element ui中表單el-form的label如何設(shè)置寬度

更新時間：2022年10月08日 14:14:47 作者：凡人繁星

這篇文章主要介紹了element ui中表單el-form的label如何設(shè)置寬度，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

element ui中表單el-form的label設(shè)置寬度

測試要求把輸入框前面的名字帶括號的把括號部分顯示在下一行，可以通過設(shè)置前面的label寬度來進(jìn)行換行。

在具體的el-form-item中設(shè)置label-width，

也可以為整個表單el-form設(shè)置label-width，這樣整個頁面的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="活動標(biāo)題：" prop="name">
? ? ? ? ? ? ? ? ? ? <el-input
? ? ? ? ? ? ? ? ? ? ? ? :disabled="isDisabledPart"
? ? ? ? ? ? ? ? ? ? ? ? class="p-inputCount"
? ? ? ? ? ? ? ? ? ? ? ? type="text"
? ? ? ? ? ? ? ? ? ? ? ? v-model="ruleFormOne.name"
? ? ? ? ? ? ? ? ? ? ? ? placeholder="請輸入標(biāo)題，限16個字"
? ? ? ? ? ? ? ? ? ? ? ? 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" >?
? ? ? ? ? ? 活動期間內(nèi)，會員每擁有
? ? ? ? ? ? ? <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> ??

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

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