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

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

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

element ui中表單el-form的label設置寬度

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

在具體的el-form-item中設置label-width，

也可以為整個表單el-form設置label-width，這樣整個頁面的label寬度統(tǒng)一。

例：

<el-form label-width="100px">

在el-form-item 重置label寬度

//在el-form 設置 label寬度 label-width=“120px”

<el-form :model="ruleFormOne" :rules="rules" ref="ruleFormOne" label-width="120px">
? ? ? ? ? <el-form-item label="活動標題：" prop="name">
? ? ? ? ? ? ? ? ? ? <el-input
? ? ? ? ? ? ? ? ? ? ? ? :disabled="isDisabledPart"
? ? ? ? ? ? ? ? ? ? ? ? class="p-inputCount"
? ? ? ? ? ? ? ? ? ? ? ? type="text"
? ? ? ? ? ? ? ? ? ? ? ? v-model="ruleFormOne.name"
? ? ? ? ? ? ? ? ? ? ? ? placeholder="請輸入標題，限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)文章

Vue $attrs & inheritAttr實現(xiàn)button禁用效果案例
這篇文章主要介紹了Vue $attrs & inheritAttr實現(xiàn)button禁用效果案例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-12-12
el-table渲染慢卡頓問題最優(yōu)解決方案
本文主要介紹了el-table渲染慢卡頓問題最優(yōu)解決方案，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2022-08-08
vue實現(xiàn)錄音功能js-audio-recorder帶波浪圖效果的示例
這篇文章主要介紹了vue實現(xiàn)錄音功能js-audio-recorder帶波浪圖效果,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2022-08-08
vue項目中axios請求網(wǎng)絡接口封裝的示例代碼
這篇文章主要介紹了vue項目中axios請求網(wǎng)絡接口封裝的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-12-12
Vue3前端生成隨機id(生成?UUID)實際運用
前端在做增刪改查時通常會使??個唯?數(shù)值做為數(shù)據(jù)的key值,下面這篇文章主要給大家介紹了關(guān)于Vue3前端生成隨機id(生成?UUID)的相關(guān)資料,文中給出了詳細的代碼示例,需要的朋友可以參考下
2024-04-04
vue+element UI實現(xiàn)樹形表格帶復選框的示例代碼
這篇文章主要介紹了vue+element UI實現(xiàn)樹形表格帶復選框的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2019-04-04
web前端vue filter 過濾器
vue的過濾器通常用在一些常見的文本格式化，過濾器可以用在兩個地方：雙花括號插值和 v-bind 表達式。本文給大家介紹了web前端vue filter 過濾器的相關(guān)知識，感興趣的朋友一起看看吧
2018-01-01
vue如何使用mapbox對當前行政區(qū)劃進行反選遮罩
這篇文章主要介紹了vue如何使用mapbox對當前行政區(qū)劃進行反選遮罩問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2023-10-10
vue項目實現(xiàn)左滑刪除功能(完整代碼)
最近在開發(fā)移動端項目，通過向左滑動出現(xiàn)刪除按鈕，點擊即可刪除，怎么實現(xiàn)這個功能呢，接下來小編給大家?guī)韺嵗a幫助大家學習vue項目實現(xiàn)左滑刪除功能，感興趣的朋友跟隨小編一起看看吧
2021-05-05
使用vant-picker實現(xiàn)自定義內(nèi)容,根據(jù)內(nèi)容添加圖標
這篇文章主要介紹了使用vant-picker實現(xiàn)自定義內(nèi)容，根據(jù)內(nèi)容添加圖標，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-12-12